/* ============================================================
   WashDesk — компонентные стили (светлая + тёмная тема)
   Подключается после site.css
   ============================================================ */

/* ---------- База и отступы ---------- */
main.main-content { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- Главная: статы и быстрые действия ---------- */
.stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.span2 { grid-column: 1 / -1; }
.stat-card2 { position: relative; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px 14px; }
.stat-card2.stat-card-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.stat-card2.stat-card-link:hover { transform: translateY(-2px); box-shadow: var(--wd-shadow-md); color: inherit; }
.stat-card2.stat-card-link:active { transform: scale(.98); }
.stat-card2.primary { background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); border-color: transparent; color: #fff; }
.stat-card2 .stat-avg2 { position: absolute; top: 10px; right: 12px; font-size: 11px; opacity: .9; }
.stat-card2.primary .stat-icon2 { font-size: 20px; }
.stat-card2.primary .stat-label2 { color: rgba(255,255,255,.85); }
.stat-row2 { display: flex; align-items: center; gap: 10px; }
.stat-icon2 { font-size: 22px; line-height: 1; }
.stat-value2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.stat-label2 { font-size: 11px; color: var(--wd-text-muted); margin-top: 2px; }
.stat-arrow { font-weight: 700; opacity: .65; margin-left: 2px; }
.stat-sub { font-size: 11px; margin-top: 2px; color: var(--wd-success); }
.stat-sub-muted { font-size: 11px; margin-top: 2px; color: var(--wd-text-muted); }
.stat-card-action { display: flex; align-items: center; justify-content: center; padding: 8px; }
.stat-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--wd-primary); color: #fff; border-radius: 12px; font-weight: 600; text-decoration: none; font-size: 14px; padding: 10px 8px; }
.stat-action-btn:hover { color: #fff; opacity: .9; }
/* 0.11: вторая кнопка («📅 Записать») — под основной, светлая */
.stat-card-action:has(.stat-action-btn + .stat-action-btn) { flex-direction: column; gap: 6px; }
.stat-action-btn.is-secondary, .stat-action-btn.is-secondary:hover { background: var(--wd-primary-light); color: var(--wd-primary-dark); }
.shift-quick { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px 14px; }
.shift-quick-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.shift-quick .sq-icon { font-size: 20px; line-height: 1; }
.shift-quick .sq-text { font-size: 14px; font-weight: 600; color: var(--wd-text); }
.shift-quick .sq-chevron { color: var(--wd-text-subtle); font-size: 18px; }
.shift-quick .sq-btn { margin-left: auto; border: none; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; flex-shrink: 0; }
.sq-btn.to-close { background: var(--wd-danger); }
.sq-btn.to-open { background: var(--wd-success); }

/* ---------- Смены ----------
   История: период + значок итога (сошлось / недостача / излишек / идёт), суммы одной строкой,
   удаление — иконкой. Раньше итог был серым «0 ₽» без подписи, а под каждой сменой — красная кнопка. */
.shift-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.shift-row-total { font-weight: 700; font-size: 16px; }
.shift-sep { margin: 6px 0; border-top: 1px dashed var(--wd-border); }
.shift-comment { margin-top: 8px; font-size: 13px; color: var(--wd-text-muted); }
.shift-list { display: flex; flex-direction: column; gap: 8px; }
.shift-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px 14px; }
/* 0.11: смена по ссылке из «Финансов» (?shift=id#shift-id) */
.shift-card { scroll-margin-top: calc(var(--wd-topbar-h, 56px) + 16px); }
.shift-card.is-focus { border-color: var(--wd-primary); box-shadow: 0 0 0 3px var(--wd-primary-light); }
.shift-card.is-open { border-left: 4px solid var(--wd-success); }
.shift-card-top { display: flex; align-items: center; gap: 8px; }
.shift-period { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-arrow { margin: 0 4px; color: var(--wd-text-subtle); }
.shift-result { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.shift-result.is-ok { background: rgba(16,185,129,.12); color: var(--wd-success); }
.shift-result.is-open { background: var(--wd-primary-light); color: var(--wd-primary-dark); }
.shift-result.is-bad { background: rgba(239,68,68,.12); color: var(--wd-danger); }
.shift-result.is-warn { background: rgba(245,158,11,.14); color: #b45309; }
body.dark .shift-result.is-warn { color: #fbbf24; }
.shift-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--wd-text-muted); }
.shift-nums b { color: var(--wd-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-del { margin: 0; flex-shrink: 0; }
.shift-del .icon-btn { width: 28px; height: 28px; font-size: 13px; }
/* Текущая смена — компактный блок вместо карточки на полэкрана */
.shift-now { margin-bottom: 16px; padding: 12px 14px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-left: 4px solid var(--wd-success); border-radius: var(--wd-radius); }
.shift-now.is-closed { border-left-color: var(--wd-danger); }
.shift-now-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.shift-now-title { font-size: 15px; font-weight: 700; }
.shift-now-since { font-size: 13px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
.shift-now-sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; font-size: 14px; color: var(--wd-text-muted); }
.shift-now-sum b { font-size: 20px; color: var(--wd-text); font-variant-numeric: tabular-nums; }
.shift-now-btn { margin-top: 10px; }
/* Маленькая кнопка-иконка (удалить, изменить) — вместо широких кнопок в карточках */
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--wd-border); background: transparent; color: var(--wd-text-muted); font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.icon-btn:hover { border-color: var(--wd-text-muted); }
.icon-btn.is-danger:hover { border-color: var(--wd-danger); background: rgba(239,68,68,.08); }
/* ---------- Заметки ---------- */
.note-item { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px 14px; margin-bottom: 8px; }
.note-item.opacity-50 { opacity: .55; }
.note-item.is-pinned { border-color: var(--wd-primary); }
.note-text { white-space: pre-wrap; font-size: 14px; color: var(--wd-text); }
.note-text.note-done { text-decoration: line-through; color: var(--wd-text-muted); }
.note-actions-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.note-round-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--wd-border); background: var(--wd-surface-2); color: var(--wd-text-muted); cursor: pointer; font-size: 14px; transition: border-color .15s, color .15s; }
.note-round-btn:hover { border-color: var(--wd-primary); color: var(--wd-primary); }
.note-round-btn.note-danger:hover { border-color: var(--wd-danger); color: var(--wd-danger); }
.note-round-btn.pin-note-btn.is-active { border-color: var(--wd-primary); color: var(--wd-primary); background: rgba(var(--wd-primary-rgb), .12); }
.note-round-btn svg { width: 16px; height: 16px; }
/* Правка заметки: форма скрыта, пока не нажали ✏ (Notes.cshtml показывает её style.display) */
.note-edit-form { display: none; }
.note-edit-form textarea, .note-edit-form textarea:focus { resize: none; box-shadow: none; white-space: pre-wrap; }
/* 0.12: зона нажатия 40×40 (видимый квадрат — 24 px, остальное — прозрачная рамка вокруг) */
.note-toggle-check, .sp-nav, .qty-btn { position: relative; }
.note-toggle-check::after, .wph-del::after, .sp-nav::after, .qty-btn::after, .pub-modal-close::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
.note-toggle-check { width: 24px; height: 24px; padding: 0; border: 1.5px solid var(--wd-border); border-radius: 6px; background: transparent; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.note-toggle-check.done { background: var(--wd-primary); border-color: var(--wd-primary); }
.note-toggle-check svg { width: 15px; height: 15px; }
.auto-expand { resize: none; overflow: hidden; }
/* Тост для флеш-сообщений после сохранения (flash-toast.js, [data-flash-toast]) — виден независимо от скролла */
.wd-toast-wrap { position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 4500;
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
/* Стекло в цветах темы; цвет сообщения — полоска слева и точка, а не заливка */
.wd-toast { --wd-toast-accent: var(--wd-success); position: relative; max-width: 420px; width: 100%; padding: 12px 16px 12px 36px;
    border-radius: 16px; font-size: 14px; font-weight: 600; text-align: left; color: var(--wd-text);
    background: var(--wd-glass-modal, var(--wd-surface-solid)); border: 1px solid var(--wd-border);
    border-left: 4px solid var(--wd-toast-accent);
    -webkit-backdrop-filter: var(--wd-blur); backdrop-filter: var(--wd-blur);
    box-shadow: var(--wd-edge, none), var(--wd-shadow-md);
    opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.wd-toast::before { content: ''; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
    background: var(--wd-toast-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wd-toast-accent) 22%, transparent); }
.wd-toast.is-open { opacity: 1; transform: translateY(0); }
.wd-toast.is-success { --wd-toast-accent: var(--wd-success); }
.wd-toast.is-danger { --wd-toast-accent: var(--wd-danger); }
/* Метки и чек-листы заметок (пункт 21 плана 0.10) */
.note-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.note-label-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(var(--wd-primary-rgb), .12); color: var(--wd-primary); }
.note-checklist { display: flex; flex-direction: column; gap: 6px; }
.note-check-line { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--wd-text); cursor: pointer; }
.note-check-line input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--wd-primary); margin: 0; }
.note-check-line.is-done span, .note-check-line:has(input:checked) span { text-decoration: line-through; color: var(--wd-text-muted); }
.notes-search-wrap { position: relative; }
/* ---------- 0.13 (A7): группы заметок — вкладки, разделы, окно «📁 Группы» ---------- */
.ng-bar { display: flex; align-items: center; gap: 8px; }
.ng-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ng-tabs::-webkit-scrollbar { display: none; }
.ng-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); color: var(--wd-text); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.ng-tab b { font-weight: 600; font-size: 12px; color: var(--wd-text-muted); }
.ng-tab.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.ng-tab.is-active b { color: rgba(255, 255, 255, .85); }
.ng-manage { flex: none; margin-left: auto; }
.ng-sec + .ng-sec { margin-top: 14px; }
.ng-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; margin-bottom: 8px; border: 0; border-bottom: 1px solid var(--wd-border);
    background: none; color: var(--wd-text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.ng-head:hover .ng-head-name { color: var(--wd-primary); }
.ng-chev { display: inline-block; width: 14px; color: var(--wd-text-muted); transition: transform .2s ease; }
.ng-head-count { margin-left: auto; padding: 0 9px; border-radius: 999px; background: var(--wd-surface-2); color: var(--wd-text-muted); font-size: 12px; font-weight: 600; }
.ng-head-lock { font-size: 13px; }
.ng-sec.is-folded:not(.is-searching) > .ng-body { display: none; }
.ng-sec.is-folded:not(.is-searching) .ng-chev { transform: rotate(-90deg); }
.wd-dialog.ng-dialog { max-width: 600px; }
.ng-dlg-hint { font-size: 13px; color: var(--wd-text-muted); margin-bottom: 10px; }
.ng-dlg-list { display: flex; flex-direction: column; gap: 6px; max-height: min(50vh, 420px); overflow-y: auto; }
.ng-dlg-row, .ng-dlg-new { display: flex; align-items: center; gap: 6px; }
.ng-dlg-new { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wd-border); flex-wrap: wrap; }
.ng-dlg-ico { flex: none; width: 52px; text-align: center; padding-left: 4px; padding-right: 4px; }
.ng-dlg-name { flex: 1 1 140px; min-width: 0; }
.ng-dlg-kind { flex: none; font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; }
.ng-dlg-own { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wd-text-muted); }
.ng-dlg-empty { color: var(--wd-text-muted); font-size: 14px; }
@media (max-width: 575.98px) { .ng-dlg-kind { display: none; } .ng-manage { padding-left: 8px; padding-right: 8px; } }
/* 0.12 (Н-69): ПК — заметки во всю ширину экрана; карточки — сеткой (сколько колонок влезет), таблицы — во всю строку.
   Порядок (закреплённые, новые, выполненные) — по строкам сетки, как и в списке на телефоне */
@media (min-width: 992px) {
    main.main-content:has(.notes-page) { max-width: none; }
    /* Ревью 16.10: заметки одного ряда — одной высоты, кнопки прижаты к низу карточки */
    /* 0.13 (A7): сетка — внутри раздела группы (.ng-body), разделы идут друг под другом */
    .notes-page .ng-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: stretch; }
    .notes-page .ng-body > .note-item { margin-bottom: 0; display: flex; flex-direction: column; }
    .notes-page .ng-body > .note-item > .flex-grow-1 { flex: 1 1 auto; }
    .notes-page .ng-body > .note-item > .note-actions-row { margin-top: auto; padding-top: 10px; }
    .notes-page .ng-body > .note-item[data-is-table="1"] { grid-column: 1 / -1; }
    .notes-page #addNoteForm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: start; }
    .notes-page #addNoteForm > #addNoteText, .notes-page #addNoteForm > #addNoteOptions { grid-column: 1; }
    .notes-page #addNoteForm > .d-flex { grid-column: 2; grid-row: 1; }
    .notes-page #addNoteForm > .d-flex > .btn-primary { flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
}
/* ---------- 0.12 (Н-32): таблицы в заметках (note-table.js) ---------- */
.note-item > .flex-grow-1 { min-width: 0; }
.note-table-title { font-weight: 700; font-size: 15px; color: var(--wd-text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.note-table-title.note-done { text-decoration: line-through; color: var(--wd-text-muted); }
.note-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wd-border); border-radius: var(--wd-radius-sm); background: var(--wd-surface-solid); }
.note-table { border-collapse: collapse; min-width: 100%; font-size: 14px; color: var(--wd-text); }
.note-table th, .note-table td { border: 1px solid var(--wd-border); padding: 6px 10px; vertical-align: top; text-align: left; white-space: pre-wrap; word-break: break-word; min-width: 90px; max-width: 320px; font-weight: 400; }
.note-table tr > :first-child { border-left: 0; }
.note-table tr > :last-child { border-right: 0; }
.note-table thead tr:first-child > * { border-top: 0; }
.note-table tbody tr:last-child > * { border-bottom: 0; }
.note-table .nt-head { font-weight: 700; background: var(--wd-surface-2); }
.note-table .nt-b { font-weight: 700; }
.note-table .nt-i { font-style: italic; }
.note-table .nt-a-c { text-align: center; }
.note-table .nt-a-r { text-align: right; }
.note-table .nt-s-s { font-size: 12px; }
.note-table .nt-s-l { font-size: 18px; }
/* Палитра из цветов темы: текст — читаемые оттенки, фон — полупрозрачная заливка (видно и на стекле, и в тёмной теме) */
.nt-c-red { color: #d70015; } .nt-c-orange { color: #c93400; } .nt-c-yellow { color: #a05a00; } .nt-c-green { color: #248a3d; }
.nt-c-blue { color: #0040dd; } .nt-c-purple { color: #8944ab; } .nt-c-gray { color: #6e6e73; }
body.dark .nt-c-red { color: #ff6961; } body.dark .nt-c-orange { color: #ffb340; } body.dark .nt-c-yellow { color: #ffd426; }
body.dark .nt-c-green { color: #30db5b; } body.dark .nt-c-blue { color: #409cff; } body.dark .nt-c-purple { color: #da8fff; } body.dark .nt-c-gray { color: #aeaeb2; }
.note-table .nt-bg-red, .nt-sw-red { background-color: rgba(255,59,48,.18); } .note-table .nt-bg-orange, .nt-sw-orange { background-color: rgba(255,149,0,.2); }
.note-table .nt-bg-yellow, .nt-sw-yellow { background-color: rgba(255,204,0,.26); } .note-table .nt-bg-green, .nt-sw-green { background-color: rgba(52,199,89,.2); }
.note-table .nt-bg-blue, .nt-sw-blue { background-color: rgba(0,122,255,.16); } .note-table .nt-bg-purple, .nt-sw-purple { background-color: rgba(175,82,222,.18); }
.note-table .nt-bg-gray, .nt-sw-gray { background-color: rgba(142,142,147,.2); }
body.dark .note-table .nt-bg-red, body.dark .nt-sw-red { background-color: rgba(255,69,58,.28); } body.dark .note-table .nt-bg-orange, body.dark .nt-sw-orange { background-color: rgba(255,159,10,.28); }
body.dark .note-table .nt-bg-yellow, body.dark .nt-sw-yellow { background-color: rgba(255,214,10,.26); } body.dark .note-table .nt-bg-green, body.dark .nt-sw-green { background-color: rgba(48,209,88,.26); }
body.dark .note-table .nt-bg-blue, body.dark .nt-sw-blue { background-color: rgba(10,132,255,.3); } body.dark .note-table .nt-bg-purple, body.dark .nt-sw-purple { background-color: rgba(191,90,242,.28); }
body.dark .note-table .nt-bg-gray, body.dark .nt-sw-gray { background-color: rgba(152,152,157,.28); }
/* Редактор: панель кнопок (крупные на телефоне), номера строк и буквы колонок — выделение целиком */
.nt-editor { display: flex; flex-direction: column; gap: 8px; }
.nt-toolbar { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.nt-tool-group { display: flex; flex-wrap: wrap; gap: 4px; }
.nt-tool { min-width: 38px; min-height: 38px; padding: 4px 10px; border-radius: 10px; font-weight: 600; line-height: 1; }
.nt-tool-b { font-weight: 800; } .nt-tool-i { font-style: italic; font-family: Georgia, serif; }
.nt-tool-color { text-decoration: underline; text-decoration-color: var(--wd-danger); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nt-tool-danger:hover { border-color: var(--wd-danger); color: var(--wd-danger); background: transparent; }
.nt-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--wd-border); border-radius: var(--wd-radius-sm); background: var(--wd-surface); }
.nt-palette[hidden] { display: none; }
.nt-palette-cap { font-size: 13px; color: var(--wd-text-muted); margin-right: 4px; }
.nt-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--wd-border-strong); padding: 0; cursor: pointer; color: var(--wd-text-muted); background: var(--wd-surface-solid); font-size: 14px; }
.nt-swatch:hover { border-color: var(--wd-primary); }
.nt-swatch-none { background: transparent; }
.note-table.nt-edit td { padding: 0; position: relative; }
.note-table.nt-edit td.nt-selected { box-shadow: inset 0 0 0 9999px rgba(var(--wd-primary-rgb), .08); }
.note-table.nt-edit td.nt-current { outline: 2px solid var(--wd-primary); outline-offset: -2px; }
.note-table.nt-edit .nt-input { display: block; width: 100%; min-width: 110px; min-height: 38px; padding: 8px 10px; border: 0; background: transparent; color: inherit;
    font: inherit; font-weight: inherit; font-style: inherit; text-align: inherit; resize: none; overflow: hidden; outline: none; box-shadow: none; white-space: pre-wrap; }
.note-table.nt-edit th.nt-corner, .note-table.nt-edit th.nt-rowhead, .note-table.nt-edit th.nt-colhead { padding: 0; min-width: 0; background: var(--wd-surface-2); text-align: center; }
.note-table.nt-edit th.nt-corner { width: 36px; }
.note-table.nt-edit .nt-rowhead button, .note-table.nt-edit .nt-colhead button { display: block; width: 100%; min-width: 36px; min-height: 32px; padding: 4px 6px; border: 0; background: transparent;
    color: var(--wd-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.note-table.nt-edit .nt-rowhead button { min-height: 38px; }
.note-table.nt-edit .nt-rowhead button.is-active, .note-table.nt-edit .nt-colhead button.is-active { color: var(--wd-primary); background: rgba(var(--wd-primary-rgb), .12); }
.nt-hint { font-size: 12px; color: var(--wd-text-muted); }
@media (pointer: coarse) {
    .nt-tool { min-width: 44px; min-height: 44px; font-size: 15px; }
    .nt-swatch { width: 40px; height: 40px; }
    /* Не меньше 16px — iOS не увеличивает страницу при вводе; крупный шрифт ячейки остаётся крупным */
    .note-table.nt-edit .nt-input { min-height: 44px; font-size: max(16px, 1em); }
}

/* ---------- Меню «Ещё» (Settings/Index): карточка мойки + группы строк как в настройках телефона ---------- */
.settings-company { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 18px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); }
.settings-logo.wd-avatar-picker, .settings-logo .wd-avatar-img { width: 64px; height: 64px; }
.settings-logo .wd-avatar-img { border-width: 2px; }
.settings-logo .wd-avatar-edit-btn { width: 24px; height: 24px; font-size: 12px; }
.settings-company-info { flex: 1; min-width: 0; }
.settings-company-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.settings-company-meta { font-size: 13px; color: var(--wd-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 0.13 (A4): шапка «Ещё» — карточка предприятия (три строки, кнопка ✎), поиск и чипы групп */
.st-card { position: relative; align-items: center; }
.st-card .settings-company-name { display: flex; min-width: 0; white-space: nowrap; }
.st-card .settings-company-name > span:first-child { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.st-card-sphere { flex: 0 10 auto; font-weight: 500; color: var(--wd-text-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.st-card-edit { flex: none; align-self: flex-start; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--wd-surface-2); color: var(--wd-text-muted); text-decoration: none; font-size: 14px; }
.st-card-edit:hover { color: var(--wd-primary); }
.st-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; min-width: 0; }
.st-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.st-chips::-webkit-scrollbar { display: none; }
.st-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); color: var(--wd-text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.st-chip:hover { color: var(--wd-primary); }
.st-chip.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.st-chip.is-danger { color: var(--wd-danger, #dc2626); }
.st-chip.is-danger.is-active { background: var(--wd-danger, #dc2626); border-color: var(--wd-danger, #dc2626); color: #fff; }
/* Телефон: карточка в одну строку (логотип, название, сфера), чипы под ней, поиск ниже */
@media (max-width: 991.98px) {
    .st-head .st-card { margin-bottom: 10px; padding: 10px 12px; gap: 10px; }
    .st-head .settings-logo.wd-avatar-picker, .st-head .settings-logo .wd-avatar-img { width: 40px; height: 40px; }
    .st-head .settings-logo .wd-avatar-edit-btn, .st-head .settings-logo .wd-avatar-del-btn { display: none; }
    .st-card-line2, .st-card-line3 { display: none; }
    .st-card .settings-company-name { font-size: 16px; }
    .st-tools .st-chips { order: -1; }
}
.settings-group-title { margin: 0 4px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); }
.settings-group { margin-bottom: 16px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); overflow: hidden; }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: none; background: transparent; color: var(--wd-text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background .15s; }
.settings-row + .settings-row { border-top: 1px solid var(--wd-border); }
/* Строка-кнопка внутри формы (действие в группе) — тот же разделитель */
.settings-group > form:not(:first-child) > .settings-row, .settings-group > .settings-row + form > .settings-row { border-top: 1px solid var(--wd-border); }
.settings-row:hover { background: var(--wd-surface-2); color: var(--wd-text); }
.settings-ico { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--wd-surface-2); font-size: 16px; }
.settings-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-text b { font-size: 15px; font-weight: 600; }
.settings-text small { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-chev { color: var(--wd-text-subtle); font-size: 20px; line-height: 1; }
.settings-hint { font-size: 13px; color: var(--wd-text-muted); margin: -4px 0 12px; }

.settings-row.is-static { cursor: default; }
.settings-row.is-static:hover { background: transparent; }
.settings-row.is-danger, .settings-row.is-danger:hover { color: var(--wd-danger); }
.settings-row.is-static .settings-text small { order: -1; }
/* Доступ ролей и модули: подпись под названием, переносится */
.settings-row.access-row .settings-text small { order: 0; white-space: normal; }
.access-row.is-locked { opacity: .55; }
/* 0.11: мини-статус справа в строке-кнопке («Вкл · 8 из 12» у «Уведомлений») */
.settings-state { flex-shrink: 0; max-width: 45%; font-size: 13px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-state.is-on { color: var(--wd-success); font-weight: 600; }
.settings-state.is-off { color: var(--wd-warning); }
/* 0.11: тихие часы — два поля времени в строку */
.notify-quiet-times { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px 58px; }
.notify-quiet-times input { max-width: 120px; }
.acc-value { font-weight: 600; word-break: break-all; }

/* ---------- Профиль аккаунта: полоса, аватар на её краю, имя, роль ---------- */
.acc-hero { position: relative; margin-bottom: 14px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); overflow: hidden; }
.acc-hero-band { height: 64px; background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); }
.acc-hero-body { padding: 0 16px 14px; margin-top: -44px; text-align: center; }
.acc-avatar.avatar-upload-wrap { width: 88px; height: 88px; margin: 0 auto 8px; }
.acc-avatar .avatar-img-96 { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid var(--wd-surface); background: var(--wd-surface-2); }
.acc-avatar .avatar-upload-btn { width: 26px; height: 26px; font-size: 12px; }
.acc-name { font-size: 20px; font-weight: 700; line-height: 1.25; }
.acc-login { font-size: 13px; color: var(--wd-text-muted); }
.acc-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acc-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.acc-badge.is-role { background: rgba(16,185,129,.14); color: var(--wd-success); }
.acc-badge.is-admin { background: var(--wd-primary-light); color: var(--wd-primary-dark); }
body.dark .acc-badge.is-admin { color: var(--wd-primary); }
.acc-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13px; color: var(--wd-text-muted); }
.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.acc-stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); text-align: center; }
.acc-stats b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-stats b.is-accent { color: var(--wd-primary-dark); }
.acc-stats b.is-good { color: var(--wd-success); }
body.dark .acc-stats b.is-accent { color: var(--wd-primary); }
.acc-stats span { font-size: 11px; color: var(--wd-text-muted); line-height: 1.3; }
/* ---------- Размеры авто (Settings/Sizes) ---------- */
.size-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.size-row + .size-row { border-top: 1px solid var(--wd-border); }
.size-view { flex: 1; min-width: 0; }
.size-silhouette { width: 44px; height: 17px; fill: var(--wd-text); flex-shrink: 0; opacity: .8; }
.size-name { font-weight: 600; font-size: 15px; color: var(--wd-text); }
.size-meta { font-size: 12px; color: var(--wd-text-muted); }
.size-body-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.size-body-type-chip { padding: 1px 8px; border-radius: 999px; background: var(--wd-surface-2); font-size: 11px; color: var(--wd-text-muted); }
.size-body-type-silhouette { width: 18px; height: 8px; fill: currentColor; }

/* Переключатель (вкл/выкл) */
.wd-switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; cursor: pointer; }
/* Невидимая галочка накрывает весь переключатель: он нажимается и там, где стоит не внутри label
   (настройка главной, отчёты — 0.12: переключатели не нажимались) */
.wd-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wd-switch input:disabled { cursor: not-allowed; }
.wd-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--wd-border-strong); transition: background .15s; }
.wd-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.wd-switch input:checked + span { background: var(--wd-primary); }
.wd-switch input:checked + span::after { transform: translateX(18px); }
.wd-switch input:disabled + span { opacity: .5; cursor: not-allowed; }
/* 0.11: выключенный переключатель в тёмной теме сливался с фоном — светлая дорожка */
body.dark .wd-switch span { background: rgba(255, 255, 255, .22); }
body.dark .wd-switch input:checked + span { background: var(--wd-primary); }
/* Переключатели Bootstrap (form-switch), где они остались, — тоже видимые в тёмной теме */
body.dark .form-switch .form-check-input:not(:checked) {
    background-color: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Лояльность: сводка по картам */
.card-pools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.card-pools > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--wd-surface-2); }
.card-pools b { font-size: 16px; font-variant-numeric: tabular-nums; }
.card-pools span { font-size: 11px; color: var(--wd-text-muted); text-align: center; }
/* ---------- Админка и шапка компании ---------- */
.admin-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 14px; margin-bottom: 8px; color: var(--wd-text); text-decoration: none; display: block; transition: border-color .15s; }
.admin-card:hover { border-color: var(--wd-primary); color: var(--wd-text); }
.admin-card-title { font-weight: 700; font-size: 15px; }
.admin-card-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 3px; }
.admin-card-stats { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--wd-text-muted); flex-wrap: wrap; }
.admin-card-stats b { color: var(--wd-text); }
/* Админка AluHub: плитки цифр, счётчик в строке меню, карточка мойки, статусы */
.admin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.admin-tile { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--wd-radius); background: var(--wd-surface); border: 1px solid var(--wd-border); color: var(--wd-text); text-decoration: none; }
a.admin-tile:hover { border-color: var(--wd-primary); color: var(--wd-text); }
.admin-tile b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.admin-tile span { font-size: 12px; color: var(--wd-text-muted); }
.admin-tile small { font-size: 11px; color: var(--wd-text-subtle); margin-top: 2px; }
.settings-count { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--wd-danger); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--wd-surface-2); color: var(--wd-text-muted); }
.pill-danger { background: rgba(239,68,68,.14); color: var(--wd-danger); }
.pill-warning { background: rgba(245,158,11,.16); color: #b45309; }
.pill-ok { background: var(--wd-primary-light); color: var(--wd-primary-dark); }
body.dark .pill-warning { color: var(--wd-warning); }
body.dark .pill-ok { color: var(--wd-primary); }
.admin-co { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--wd-text); text-decoration: none; }
.admin-co + .admin-co { border-top: 1px solid var(--wd-border); }
a.admin-co:hover { background: var(--wd-surface-2); color: var(--wd-text); }
.admin-co-logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--wd-surface-2); }
.admin-co-logo.is-round { border-radius: 50%; }
.admin-co-ini { display: flex; align-items: center; justify-content: center; background: var(--wd-primary-light); color: var(--wd-primary-dark); font-weight: 700; }
.admin-co-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-co-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.admin-co-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-co-meta { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-co-mods { font-size: 13px; letter-spacing: 2px; }
.admin-co-num { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.admin-co-num b { font-size: 14px; font-variant-numeric: tabular-nums; }
.admin-co-num small { font-size: 11px; color: var(--wd-text-muted); }
/* На ПК (мышь) прокручивать ряд вбок нечем — чипы переносятся на новую строку */
@media (hover: hover) and (pointer: fine) {
    .chip-row { flex-wrap: wrap; overflow: visible; }
    .chip-row.is-overflow { -webkit-mask-image: none; mask-image: none; }
}
/* Кнопка с выбранной машиной (кабинет клиента без сети) */
.veh-picker-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--wd-border); border-radius: var(--wd-radius); background: var(--wd-surface); color: var(--wd-text); font: inherit; cursor: pointer; text-align: left; }
.veh-picker-value { flex: 1; min-width: 0; }
.veh-picker-value .veh-card2 { max-width: 210px; }
button.chip { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
button.chip:disabled { opacity: .4; cursor: not-allowed; }

/* Смена: движение наличных, безнал для сверки, операции, действия */
/* Смены: три главных числа плитками, касса и безнал — отдельными блоками строк */
.shift-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 4px; }
.shift-stats > div { background: var(--wd-surface-2); border-radius: 10px; padding: 8px 6px; text-align: center; min-width: 0; }
.shift-stats b { display: block; font-size: 15px; font-weight: 700; color: var(--wd-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-stats small { display: block; font-size: 11px; color: var(--wd-text-muted); margin-top: 2px; }
.shift-stats > div.is-accent { background: var(--wd-primary-light); }
.shift-stats > div.is-accent b { color: var(--wd-primary-dark); }
body.dark .shift-stats > div.is-accent { background: rgba(var(--wd-primary-rgb),.14); }
body.dark .shift-stats > div.is-accent b { color: var(--wd-primary); }
.shift-block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); margin: 10px 0 2px; }
.shift-lines > div.is-total { border-top: 1px dashed var(--wd-border); padding-top: 4px; margin-top: 2px; color: var(--wd-text); font-weight: 600; }
.shift-lines b.is-plus { color: var(--wd-success); }
.shift-lines b.is-minus { color: var(--wd-danger); }
.shift-more { margin-top: 4px; }
.shift-more > summary { font-size: 12px; font-weight: 600; color: var(--wd-primary); cursor: pointer; list-style: none; padding: 4px 0; }
.shift-more > summary::-webkit-details-marker { display: none; }
.shift-more > summary::after { content: ' ▾'; }
.shift-more[open] > summary::after { content: ' ▴'; }
.shift-lines { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; font-size: 13px; }
.shift-lines > div { display: flex; justify-content: space-between; color: var(--wd-text-muted); }
/* 0.13 (B4): «в т. ч.» — оплаты заказов других смен и долгов */
.shift-lines.is-sub { margin-top: -2px; padding-left: 10px; border-left: 2px solid var(--wd-border); font-size: 12px; }
.shift-lines b { color: var(--wd-text); font-variant-numeric: tabular-nums; }
.shift-nocash { font-size: 12px; color: var(--wd-text-muted); margin-bottom: 6px; }
.shift-warn { font-size: 12px; color: #b45309; background: rgba(245,158,11,.12); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; }
body.dark .shift-warn { color: var(--wd-warning); }
.shift-warn-inline { color: #b45309; }
body.dark .shift-warn-inline { color: var(--wd-warning); }
.shift-ops { border-top: 1px dashed var(--wd-border); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.shift-op { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.shift-op-time { color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
.shift-op-text { flex: 1; min-width: 0; }
.shift-op-text small { color: var(--wd-text-muted); }
.shift-op .is-plus { color: var(--wd-success); }
.shift-op .is-minus { color: var(--wd-danger); }
.shift-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shift-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 4px; }

/* Этап мойки у клиента: моется / готова */
.wash-stage-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--wd-radius); border: 1px solid var(--wd-warning); background: rgba(245,158,11,.1); color: var(--wd-text); text-decoration: none; }
.wash-stage-card.is-ready { border-color: var(--wd-success); background: rgba(16,185,129,.12); }
.wash-stage-card:hover { color: var(--wd-text); }
/* Конфликты синхронизации (Settings/Conflicts) */
.conflict-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-left: 4px solid var(--wd-warning); border-radius: var(--wd-radius); padding: 12px 14px; margin-bottom: 10px; }
.conflict-card.is-rejected { border-left-color: var(--wd-danger); }
.conflict-card.is-done { border-left-color: var(--wd-border); opacity: .75; }
.conflict-top { display: flex; align-items: center; gap: 8px; }
.conflict-top b { flex: 1; font-size: 14px; }
.conflict-msg { font-size: 13px; color: var(--wd-text); margin-top: 6px; line-height: 1.45; }
.conflict-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin-top: 8px; }
.conflict-pair span { color: var(--wd-text-muted); }
.conflict-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 6px; }
/* 0.12 (С-26): что это было — номер машины, клиент, сумма */
.conflict-what { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--wd-text); }
.conflict-what .plate-ru { --plate-h: 22px; }
.conflict-what b { font-size: 15px; }
.conflict-done-title { cursor: pointer; }
.pill-danger { background: rgba(239,68,68,.12); color: var(--wd-danger); }
/* «Возможности» (Settings/Features): модули мойки с пользой */
.feature-card { display: block; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 14px; margin-bottom: 10px; }
.feature-card:not(.is-on) { border-color: color-mix(in srgb, var(--wd-primary) 45%, var(--wd-border)); }
.feature-head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: default; }
details.feature-card > summary { cursor: pointer; }
details.feature-card > summary::-webkit-details-marker { display: none; }
details.feature-card:not([open]) > :not(summary) { display: none; }
details.feature-card[open] > summary { margin-bottom: 8px; }
.feature-ico { font-size: 22px; line-height: 1; }
.feature-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--wd-text); }
.feature-desc { font-size: 13px; color: var(--wd-text-muted); margin: 6px 0 8px; }
/* 0.13 (B2): страница «Нумерация» — пример следующего номера */
.num-example { font-size: 13px; color: var(--wd-text-muted); padding: 8px 10px; border-radius: 10px; background: var(--wd-surface-2); }
.num-example b { color: var(--wd-text); font-size: 15px; font-variant-numeric: tabular-nums; }
/* 0.13 (блок 7): следующий номер по каждой сфере при «отдельном счётчике на сферу» */
.num-spheres { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--wd-border); font-size: 13px; }
.num-spheres[hidden] { display: none; }
.num-sphere { display: flex; justify-content: space-between; gap: 10px; color: var(--wd-text-muted); }
.num-sphere b { color: var(--wd-text); font-variant-numeric: tabular-nums; }
.feature-benefits { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--wd-text); }
.feature-benefits li { margin-bottom: 4px; }
.feature-why { font-size: 13px; color: var(--wd-text); background: var(--wd-surface-2); border-radius: 10px; padding: 8px 10px; }
.feature-req { font-size: 12px; color: var(--wd-text-muted); margin-top: 8px; }
/* 0.13 (H): ссылка на раздел справки модуля */
.feature-help { display: inline-block; font-size: 12.5px; margin-top: 8px; color: var(--wd-accent, #2f6fed); text-decoration: none; }
.feature-help:hover { text-decoration: underline; }
.push-offer { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--wd-surface); border: 1px dashed var(--wd-primary); }
.push-offer-text { flex: 1; font-size: 13px; color: var(--wd-text); }
.wash-stage-ico { font-size: 26px; }
.wash-stage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wash-stage-text b { font-size: 15px; }
.wash-stage-text small { font-size: 12px; color: var(--wd-text-muted); }

/* Плитка «Записи» на главной: новые заявки — красной меткой и рамкой */
.quick-action.has-alert { border-color: var(--wd-danger); }
.quick-action-badge { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--wd-danger); }

/* Онлайн-запись: настройки, слоты, карточки записей */
.booking-radio { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--wd-primary); }
.booking-mode .booking-mode-for { color: var(--wd-text-subtle); }
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--wd-text-muted); }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot-btn { height: 38px; border-radius: 10px; border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.slot-btn:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.slot-btn.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }

/* 0.11: выбор дня и времени (slot-picker.js) — полоса дней и сетка «Утро / День / Вечер».
   Телефон: части дня вкладками, видна одна; ПК (≥768px): три колонки рядом, вкладки не нужны. */
.sp { margin-bottom: 16px; }
.sp-days-wrap { display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px; }
.sp-nav { flex-shrink: 0; width: 28px; border: none; background: none; color: var(--wd-text-muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 0; }
.sp-nav:hover:not(:disabled) { color: var(--wd-primary); background: var(--wd-surface-2); }
.sp-nav:disabled { opacity: .25; cursor: default; }
.sp-days { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 0; }
.sp-days::-webkit-scrollbar { display: none; }
.sp-day { position: relative; flex: 0 0 auto; width: 64px; padding: 6px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 1px; scroll-snap-align: start;
    border: 1px solid var(--wd-border); border-radius: 12px; background: var(--wd-surface); color: var(--wd-text); font: inherit; cursor: pointer; }
.sp-day small { font-size: 11px; color: var(--wd-text-muted); text-transform: capitalize; white-space: nowrap; }
.sp-day b { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-day:hover:not(:disabled) { border-color: var(--wd-primary); }
.sp-day.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.sp-day.is-active small { color: rgba(255, 255, 255, .85); }
.sp-day.is-closed { opacity: .45; cursor: not-allowed; }
.sp-day.is-closed b { text-decoration: line-through; }
.sp-day i { position: absolute; top: -6px; right: -2px; font-style: normal; font-size: 9px; padding: 0 4px; border-radius: 6px; background: var(--wd-surface-2); color: var(--wd-text-muted); }
.sp-slots { min-height: 60px; transition: opacity .15s; }
.sp-slots.is-loading { opacity: .45; pointer-events: none; }
.sp-hint { padding: 10px 2px; }
.sp-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 8px; border-radius: 12px; background: var(--wd-surface-2); }
.sp-tab { flex: 1; min-width: 0; height: 34px; border: none; border-radius: 9px; background: none; color: var(--wd-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sp-tab span { color: var(--wd-text-muted); font-weight: 500; margin-left: 2px; }
.sp-tab.is-active { background: var(--wd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sp-group { display: none; }
.sp-group.is-active { display: block; }
.sp-group-title { display: none; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.sp-slot { position: relative; height: 36px; border-radius: 10px; border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.sp-slot:hover:not(:disabled) { border-color: var(--wd-primary); }
.sp-slot:disabled { background: var(--wd-surface-2); color: var(--wd-text-muted); opacity: .5; cursor: not-allowed; }
.sp-slot.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
/* Заявка: на это время уже есть записи — точка в углу (подробно — в подсказке) */
/* 0.12 (B15): занятое одной полосой «10:00–11:30 · занято» во всю ширину сетки; наведение — окошко sp-pop (стекло) */
.sp-band { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px;
    border: 1px dashed var(--wd-border-strong, var(--wd-border)); background: repeating-linear-gradient(135deg, var(--wd-surface-2) 0 8px, transparent 8px 16px);
    color: var(--wd-text-muted); font: inherit; font-size: 13px; cursor: default; text-align: left; }
.sp-band b { color: var(--wd-text); font-variant-numeric: tabular-nums; font-weight: 600; }
.sp-band i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--wd-primary); opacity: 0; transition: opacity .15s; }
.sp-band.can-open { cursor: pointer; }
.sp-band.can-open:hover { border-color: var(--wd-primary); }
.sp-band.can-open:hover i { opacity: 1; }
.sp-pop { position: fixed; z-index: 1080; min-width: 200px; max-width: min(380px, calc(100vw - 16px)); padding: 10px 14px; border-radius: 16px;
    border: 1px solid var(--wd-border); font-size: 13px; color: var(--wd-text); pointer-events: none; }
.sp-pop-time { font-weight: 700; font-size: 14px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.sp-pop-row { padding: 2px 0; overflow-wrap: anywhere; }
.sp-pop-hint { margin-top: 6px; font-size: 12px; color: var(--wd-primary); }
.sp-slot.has-note::after { content: ""; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--wd-warning, #f0a020); }
@media (min-width: 768px) {
    .sp-tabs { display: none; }
    .sp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .sp-group, .sp-group.is-active { display: block; }
    .sp-group-title { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
    .sp-group-title span { font-weight: 500; color: var(--wd-text-muted); font-size: 12px; }
    .sp-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}

/* 0.11: «Записать клиента» (Bookings/Create) — поиск клиента и выбранный клиент */
.bk-new { max-width: 760px; }
/* 0.12 (B15): ПК — «Записать клиента» на всю ширину, две колонки: клиент/машина/услуги и день-время/«Записать» */
@media (min-width: 1200px) {
    main.main-content:has(.bk-new) { max-width: none; }
    .bk-new { max-width: none; }
    .bk-new-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .bk-new-right { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; padding-right: 4px; }
    .bk-new-right > .settings-group-title:first-child { margin-top: 0; }
}
.bk-results { display: flex; flex-direction: column; margin-top: 6px; max-height: 300px; overflow-y: auto; }
.bk-res { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: none; border-radius: 10px; background: none; color: var(--wd-text); font: inherit; text-align: left; cursor: pointer; }
.bk-res + .bk-res { border-top: 1px solid var(--wd-border); border-radius: 0; }
.bk-res:hover { background: var(--wd-surface-2); }
.bk-res b { font-size: 14px; }
.bk-res small, .bk-chosen small { font-size: 12px; color: var(--wd-text-muted); overflow-wrap: anywhere; }
.bk-res-hint { padding: 8px 2px 0; }
.bk-chosen { display: flex; align-items: center; gap: 8px; }
.bk-chosen-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 0.11: главная (телефон) — ближайшие записи на сегодня строками и «Записать клиента» */
.home-book { margin-top: 10px; border: 1px solid var(--wd-border); border-radius: var(--wd-radius); background: var(--wd-surface); overflow: hidden; }
.home-book-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; color: var(--wd-text); text-decoration: none; font-size: 14px; }
.home-book-row + .home-book-row { border-top: 1px solid var(--wd-border); }
.home-book-row b { font-variant-numeric: tabular-nums; }
.home-book-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-text-muted); }
.home-book-add { display: block; padding: 9px 14px; border-top: 1px solid var(--wd-border); color: var(--wd-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.home-book-add:first-child { border-top: none; }
/* 0.11: «приехал» — пометка и кнопка «Оформить» прямо в строке */
.home-book-row.is-arrived { align-items: center; background: color-mix(in srgb, var(--wd-success) 7%, var(--wd-surface)); }
.home-book-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-text); text-decoration: none; }
.home-book-row .pill { flex-shrink: 0; }
.home-book-go { flex-shrink: 0; padding: 3px 10px; }
.book-card { padding: 12px 14px; }
.book-card + .book-card { border-top: 1px solid var(--wd-border); }
/* 0.12 (Н-29): сворачиваемые списки (wdFold в site.js): заголовок — переключатель, тело прячется */
[data-fold-head] { cursor: pointer; user-select: none; }
.fold-caret { display: inline-block; width: 1em; margin-right: 4px; color: var(--wd-text-muted); transition: transform .15s; }
.is-folded > [data-fold-head] .fold-caret { transform: rotate(-90deg); }
.is-folded > [data-fold-body] { display: none; }
/* Поиск по услугам — все списки раскрыты, пока ищем */
.is-searching .is-folded > [data-fold-body] { display: block; }
/* Каталог: в режиме сортировки (⇅) свёрнутые группы раскрыты — порядок сквозной */
.container-fluid:has(.sortable-list.sorting) .is-folded > [data-fold-body] { display: block; }
.svc-find { padding: 10px 12px 4px; }
.svc-fold-head { display: flex; align-items: center; gap: 4px; padding: 10px 14px 6px; font-size: 13px; font-weight: 600; color: var(--wd-text-muted); }
.svc-fold-head small { margin-left: 4px; font-weight: 500; opacity: .8; }
.svc-fold-head.is-sphere { font-size: 14px; color: var(--wd-text); border-top: 1px solid var(--wd-border); }
.svc-fold.has-picked > .svc-fold-head::after { content: "●"; margin-left: 6px; font-size: 9px; color: var(--wd-primary); }
.svc-none { padding: 8px 14px; }
.section-title[data-fold-head] .fold-caret { margin-right: 2px; }

/* 0.12 (Н-31): отменённые сегодня — свёрнутым пунктом под списком */
.book-none { font-size: 13px; color: var(--wd-text-muted); }
.book-gone { margin-top: 12px; }
.book-gone > summary { cursor: pointer; padding: 6px 2px; font-size: 13px; font-weight: 600; color: var(--wd-text-muted); }
.book-gone .book-card { opacity: .75; }
.book-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.book-time { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.book-client { font-size: 14px; font-weight: 600; color: var(--wd-text); text-decoration: none; }
.book-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 3px; overflow-wrap: anywhere; }
.book-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.book-actions form { margin: 0; }
.book-svc { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.book-svc + .book-svc { border-top: 1px solid var(--wd-border); }
.book-svc input { width: 20px; height: 20px; accent-color: var(--wd-primary); flex-shrink: 0; }
.book-svc-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.book-svc-meta { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; }
.book-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-weight: 700; }

/* Строка сотрудника (_EmployeeRow): аватар · имя · роль и иконки действий справа */
.emp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.emp-row + .emp-row { border-top: 1px solid var(--wd-border); }
.emp-row.is-suspended .emp-row-ava, .emp-row.is-suspended .emp-row-body { opacity: .55; }
.emp-row-ava { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--wd-primary-light); color: var(--wd-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.emp-row-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emp-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.emp-row-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.emp-row-meta { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-row-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.emp-row-actions form { margin: 0; }
.emp-row-icons { display: flex; gap: 6px; }
/* Пункт 16: правка карточки сотрудника без аккаунта — под строкой */
.emp-card-edit { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px 64px; }
.emp-card-edit[hidden] { display: none; }
.emp-card-edit .form-control { flex: 1 1 160px; min-width: 0; }
.emp-add-card > summary { list-style: none; cursor: pointer; }
.emp-add-card > summary::-webkit-details-marker { display: none; }

/* ---------- Пункт 9: фото до/после (Shared/_WashPhotos, js/wash-photos.js) ---------- */
.wph { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px; margin-bottom: 12px; }
.wph-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wph-count { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; }
.wph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wph-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; border: 1px dashed var(--wd-border); background: var(--wd-surface-2); color: var(--wd-text-muted); font: inherit; padding: 0; }
.wph-tile.has-photo { border-style: solid; }
.wph-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.wph-tile .wph-cap { position: relative; font-size: 11px; font-weight: 600; max-width: 100%; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wph-tile.has-photo .wph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); text-align: left; }
.wph-shot { cursor: pointer; color: var(--wd-primary); }
.wph-shot:active { transform: scale(.97); }
.wph-shot.is-busy { opacity: .5; pointer-events: none; }
.wph-shot.is-more .wph-cam { font-size: 22px; line-height: 1; }
.wph-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 1; }
.wph-pending { position: absolute; top: 4px; right: 6px; font-size: 13px; }
.wph-gone { font-size: 11px; }
.wph-skip { margin-top: 10px; }
.wph-skip > summary { font-size: 13px; color: var(--wd-text-muted); cursor: pointer; list-style: none; }
.wph-skip > summary::-webkit-details-marker { display: none; }
.wph-skip-form { display: flex; gap: 8px; margin-top: 8px; }
.wph-skip-form .form-control { flex: 1; min-width: 0; }
.wph-skip-note { margin-top: 10px; font-size: 13px; color: var(--wd-text-muted); }
.wph-head .wph-count { margin-left: auto; }
.wph-compare-btn { display: inline-flex; align-items: center; gap: 5px; align-self: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--wd-border);
    background: var(--wd-surface-2); color: var(--wd-primary); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.wph-compare-btn:active { transform: scale(.97); }

/* ---------- Пункт 13: абонементы (Settings/Subscriptions, карточка клиента, чек, кабинет) ---------- */
.sub-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--wd-radius);
    background: var(--wd-surface); border: 1px solid var(--wd-border); }
.sub-row.is-off { opacity: .6; }
.sub-row-ico, .sub-plan-ico { flex: none; font-size: 20px; }
.sub-row-text, .sub-plan-text { flex: 1 1 auto; min-width: 0; }
.sub-row-text b, .sub-plan-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row-text small, .sub-plan-text small { display: block; font-size: 12px; color: var(--wd-text-muted); }
.sub-row-left { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
    font-weight: 700; background: color-mix(in srgb, var(--wd-primary) 14%, transparent); color: var(--wd-primary); }
.sub-sell > summary, .sub-plan > summary { list-style: none; cursor: pointer; font-weight: 600; }
.sub-sell > summary::-webkit-details-marker, .sub-plan > summary::-webkit-details-marker { display: none; }
.sub-sell > summary { color: var(--wd-primary); }
.sub-sell[open] > summary { margin-bottom: 10px; }
.sub-sell-plans, .sub-use-list { display: flex; flex-direction: column; gap: 6px; }
.sub-sell-plan, .sub-use { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--wd-border);
    background: var(--wd-surface-2); cursor: pointer; margin: 0; }
.sub-sell-plan:has(input:checked), .sub-use:has(input:checked) { border-color: var(--wd-primary); box-shadow: 0 0 0 1px var(--wd-primary) inset; }
.sub-sell-plan > span:nth-of-type(1), .sub-use > span { flex: 1 1 auto; min-width: 0; }
.sub-sell-plan b, .sub-use b { display: block; }
.sub-sell-plan small, .sub-use small { display: block; font-size: 12px; color: var(--wd-text-muted); }
.sub-sell-price { flex: none; font-weight: 700; white-space: nowrap; }
.sub-plan > summary { display: flex; align-items: center; gap: 10px; }
.sub-plan.is-off { opacity: .65; }
.sub-plan > summary small, .sub-plan-sold { font-weight: 400; }
.sub-plan-sold { flex: none; font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; }
.sub-plan[open] > summary { margin-bottom: 12px; }
.sub-plan-new > summary .sub-plan-ico { color: var(--wd-primary); }

/* ---------- Пункт 5: блокировка приложения (js/applock.js) — непрозрачный экран поверх всего ---------- */
html.wd-locked, html.wd-locked body { overflow: hidden; }
.wd-applock { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top)); background: var(--wd-bg, #eef0f5); color: var(--wd-text, #0b1220); }
body.dark .wd-applock { background: #050608; color: #f2f2f7; }
.wd-applock-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.wd-applock-box.shake { animation: wd-shake .35s; }
@keyframes wd-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.wd-applock-logo { width: 64px; height: 64px; border-radius: 16px; }
.wd-applock-title { font-size: 18px; font-weight: 700; }
.wd-applock-dots { display: flex; gap: 14px; margin: 4px 0; }
.wd-applock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; transition: background .1s, opacity .1s; }
.wd-applock-dots i.on { background: currentColor; opacity: 1; }
.wd-applock-msg { min-height: 18px; font-size: 13px; color: var(--wd-danger, #dc2626); }
.wd-applock-msg.is-hint { color: var(--wd-text-muted, #6b7280); }
body.dark .wd-applock-msg.is-hint { color: #8e8e93; }
.wd-applock-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; }
.wd-applock-pad button { width: 72px; height: 72px; border-radius: 50%; border: 0; font: inherit; font-size: 26px; font-weight: 500; color: inherit;
    background: color-mix(in srgb, currentColor 9%, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wd-applock-pad button:active { background: color-mix(in srgb, currentColor 20%, transparent); }
.wd-applock-pad button svg { display: block; margin: auto; }
.wd-applock-bio { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 0; font: inherit; font-size: 16px; font-weight: 600; color: #fff; background: var(--wd-primary, #0a84ff); }
.wd-applock-out { margin-top: 6px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--wd-text-muted, #6b7280); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .wd-applock-box.shake { animation: none; } }

/* Сравнение до/после (js/photo-compare.js) */
html.wpc-lock { overflow: hidden; }
.wpc { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; gap: 10px; color: #fff; background: #0b0d12;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .2s ease; }
.wpc.is-open { opacity: 1; }
.wpc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wpc-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
.wpc-tabs::-webkit-scrollbar { display: none; }
.wpc-tab, .wpc-mode { flex: none; padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.wpc-tab.is-on, .wpc-mode.is-on { background: #fff; color: #0b1220; font-weight: 600; }
.wpc-modes { display: flex; gap: 4px; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.wpc-modes .wpc-mode { padding: 4px 10px; background: transparent; }
.wpc-modes .wpc-mode.is-on { background: #fff; }
.wpc-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; cursor: pointer; }
.wpc-stage { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; }
.wpc-stage.is-side { grid-template-columns: 1fr 1fr; }
.wpc-pane, .wpc-slide { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.wpc-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wpc-pane figcaption, .wpc-label { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: 12px; font-weight: 600; pointer-events: none; }
.wpc-stage.is-slide { touch-action: none; cursor: ew-resize; user-select: none; }
.wpc-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.wpc-slide .wpc-after { clip-path: inset(0 0 0 var(--pos)); }
.wpc-label.is-after { left: auto; right: 8px; }
.wpc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .6); pointer-events: none; }
.wpc-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #fff; color: #0b1220; font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.wpc-nav { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.wpc-nav.is-prev { left: 8px; }
.wpc-nav.is-next { right: 8px; }
@media (max-aspect-ratio: 4/5) {
    .wpc-stage.is-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
@media (max-width: 560px) {
    .wpc-top { flex-wrap: wrap; }
    .wpc-tabs { order: 3; flex-basis: 100%; }
    .wpc-modes { margin-right: auto; }
}

/* ---------- Профиль без мойки (Account/Index) ---------- */
.noaccess-hero { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 12px; border-radius: var(--wd-radius);
    background: var(--wd-glass, var(--wd-surface)); border: 1px solid var(--wd-border); box-shadow: var(--wd-edge, none); }
.noaccess-hero b { display: block; font-size: 17px; }
.noaccess-hero small { color: var(--wd-text-muted); font-size: 13.5px; }
.noaccess-ico { font-size: 30px; line-height: 1; }

/* ---------- Пункт 6: плашка срока доступа (демо, пробный период) ---------- */
.access-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 9px 14px; border-radius: 14px;
    font-size: 13px; background: rgba(251, 191, 36, .16); border: 1px solid rgba(251, 191, 36, .45); color: var(--wd-text); }
.access-banner.is-demo { background: rgba(10, 132, 255, .12); border-color: rgba(10, 132, 255, .4); }
.access-banner.is-over { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .45); }
/* 0.12 (Н-36): админ AluHub смотрит предприятие виртуально */
.access-banner.is-admin-view { background: rgba(168, 85, 247, .12); border-color: rgba(168, 85, 247, .4); }
/* 0.12: история процентов услуг в «Моей зарплате» */
.salary-pcts > summary { cursor: pointer; list-style: none; }
.salary-pcts > summary::-webkit-details-marker { display: none; }
.access-banner a, .access-banner .btn-link { font-weight: 600; color: var(--wd-primary); text-decoration: none; font-size: 13px; }

/* ---------- Зарплата (пункт 16) ---------- */
.salary-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.salary-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.salary-custom .form-control { width: auto; min-width: 0; }
.salary-card { margin-bottom: 12px; }
.salary-head { color: inherit; text-decoration: none; }
.salary-due { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; }
.salary-due b { font-size: 17px; white-space: nowrap; }
.salary-due small { font-size: 11px; color: var(--wd-text-muted); }
.salary-lines { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 14px 12px 64px; font-size: 13px; color: var(--wd-text-muted); }
.salary-lines b { color: var(--wd-text); font-weight: 600; white-space: nowrap; }
/* Расшифровка сотрудника: без аватарки слева — обычный отступ */
.salary-lines.salary-lines-pad { padding: 16px 14px 12px; }

/* 0.12 (Н-12, Н-74): «Финансы → Затраты» — список во всю ширину, справа итоги периода (KPI); форма, статьи и поставщики — окнами.
   Телефон: блоки одной колонкой по order — итог, список, по статьям, по поставщикам, откуда платили */
.ex-layout { display: flex; flex-direction: column; gap: 12px; }
.ex-main { order: 2; min-width: 0; }
.ex-side { display: contents; }
.ex-side > * { margin: 0 !important; }
.ex-kpi-total { order: 1; }
.ex-kpi-cats { order: 3; } .ex-kpi-sups { order: 4; } .ex-kpi-src { order: 5; }
.ex-cat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.ex-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-text); text-decoration: none; }
a.ex-cat-name:hover { color: var(--wd-primary); }
.ex-cat-name small { color: var(--wd-text-subtle); }
.ex-cat-bar { height: 6px; border-radius: 3px; background: var(--wd-surface-2); overflow: hidden; }
.ex-cat-bar > span { display: block; height: 100%; background: var(--wd-danger); opacity: .7; }
.ex-cat > b { font-variant-numeric: tabular-nums; }
/* Строка списка. Телефон: «значок · статья (когда, откуда, поставщик, комментарий — мелко) · сумма · 🗑» */
.ex-list-card { margin: 0; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--wd-border); font-size: 14px; }
.ex-list-card > .ex-row:last-child { border-bottom: 0; }
.ex-head, .ex-c-when, .ex-c-sup, .ex-c-src, .ex-c-note { display: none; }
.ex-c-what { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ex-ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--wd-surface-2); font-size: 15px; }
.ex-what-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ex-what-text > * { overflow: hidden; text-overflow: ellipsis; }
.ex-what-text small { color: var(--wd-text-muted); font-size: 12px; }
.ex-row .ex-sum { white-space: nowrap; color: var(--wd-danger); text-align: right; font-variant-numeric: tabular-nums; }
/* Окно «＋ Затрата»: форма без своей карточки и заголовка — их даёт окно */
.ex-modal-form > .wd-form-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ex-modal-form .wd-form-title { display: none; }
@media (min-width: 992px) {
    /* Список — во всю ширину слева, итоги — колонкой справа (прилипают при прокрутке) */
    main.main-content:has(.ex-page) { max-width: 1440px; }
    .ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
    .ex-main { grid-column: 1; grid-row: 1; }
    .ex-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 12px;
        position: sticky; top: calc(var(--wd-topbar-h) + 16px); }
    /* Таблицей: когда · статья · поставщик · откуда · комментарий · сумма · 🗑 */
    .ex-row { grid-template-columns: 92px minmax(140px, 1.2fr) minmax(90px, 1fr) minmax(100px, 1fr) minmax(0, 1.4fr) 110px 40px; padding: 7px 0; }
    .ex-head { display: grid; padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .03em; }
    .ex-c-when, .ex-c-sup, .ex-c-src, .ex-c-note { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ex-c-when, .ex-c-src, .ex-c-note { color: var(--wd-text-muted); font-size: 13px; }
    .ex-c-when b { color: var(--wd-text); font-weight: 600; }
    .ex-c-src small { display: block; font-size: 11px; }
    .ex-c-sup a { text-decoration: none; }
    .ex-c-act { text-align: right; }
    .ex-meta { display: none; }
    .ex-ico { width: 26px; height: 26px; font-size: 14px; }
    .ex-row:not(.ex-head):hover { background: var(--wd-surface-2); }
}
/* Узкий ПК: без колонки «Комментарий» — он мелко под статьёй */
.ex-note-sm { display: none; }
@media (min-width: 992px) and (max-width: 1439.98px) {
    .ex-row { grid-template-columns: 84px minmax(120px, 1.2fr) minmax(80px, 1fr) minmax(90px, 1fr) 100px 36px; }
    .ex-c-note { display: none !important; }
    .ex-note-sm { display: block; }
}

/* ---------- 0.12 (Н-63): справочник поэлементно (js/dict-edit.js) — статьи расходов, «Откуда клиент» ---------- */
.dict-list { display: flex; flex-direction: column; gap: 6px; }
.dict-list.is-saving { opacity: .7; }
.dict-row { display: flex; gap: 6px; align-items: center; margin: 0; }
.dict-row .form-control { min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.dict-row .dict-icon { width: 46px; flex: 0 0 46px; text-align: center; padding-left: 4px; padding-right: 4px; }
.dict-row .icon-btn { flex: 0 0 32px; }
.dict-handle { flex: 0 0 22px; text-align: center; color: var(--wd-text-subtle); cursor: grab; user-select: none; touch-action: none; font-size: 16px; line-height: 1; }
.dict-row.is-archived { opacity: .55; }
.dict-row.is-archived .dict-handle { visibility: hidden; }
.dict-add { margin-top: 10px; }
.dict-sub { margin: 12px 0 6px; font-size: 12px; color: var(--wd-text-muted); }

/* ---------- 0.12 (Н-63): поставщики (Pages/Finance/Suppliers, Supplier) ---------- */
.sup-search { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.sup-search .search-input { padding: 10px 14px; }
.sup-pin { font-size: 11px; font-weight: 600; color: var(--wd-primary); background: rgba(var(--wd-primary-rgb), .1); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.sup-sum { white-space: nowrap; text-align: right; display: flex; flex-direction: column; font-size: 14px; }
.sup-sum small { color: var(--wd-text-muted); font-size: 11px; }
.sup-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sup-kpi { padding: 10px 12px; }
.sup-kpi b { display: block; font-size: 18px; letter-spacing: -.3px; }
.sup-kpi span { font-size: 11px; color: var(--wd-text-muted); }
.sup-req { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.sup-req dt { color: var(--wd-text-muted); font-weight: 400; }
.sup-req dd { margin: 0; overflow-wrap: anywhere; }
.sup-months { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding-top: 6px; }
.sup-month { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.sup-month i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--wd-danger); opacity: .7; min-height: 2px; }
.sup-month small { font-size: 10px; color: var(--wd-text-subtle); margin-top: 3px; white-space: nowrap; }
.sup-month.is-empty i { background: var(--wd-border); opacity: 1; }
.sup-plan { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
.sup-plan + .sup-plan { border-top: 1px dashed var(--wd-border); }
/* Блок 7: сумма не разрывается («1 190» и «₽» на разных строках) — переносится название модуля */
.sup-plan > :last-child { flex: none; white-space: nowrap; text-align: right; }
.sup-plan.is-total { font-weight: 700; font-size: 16px; }
.sup-plan s { color: var(--wd-text-subtle); font-weight: 400; margin-right: 6px; }
@media (min-width: 576px) { .sup-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Окно «Новый поставщик» (js/supplier-new.js) — стекло wdDialog, поля столбиком */
.sup-dialog { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.sup-dialog .wd-dialog-actions { margin-top: 8px; }
.sup-dialog-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sup-dialog-err { font-size: 13px; color: var(--wd-danger); }
/* 0.12 (Н-65): QR-приглашение сотрудника — белая подложка (QR читается и в тёмной теме), устаревший — бледный */
.emp-qr { display: inline-flex; padding: 12px; background: #fff; border-radius: 16px; min-height: 264px; min-width: 264px; justify-content: center; align-items: center; }
.emp-qr.is-dim { opacity: .25; }
/* 0.12 (Н-67): «Фото для витрины» — группы по назначению; на ПК — в две колонки */
.sc-photo-groups { display: grid; gap: 12px; }
@media (min-width: 992px) { .sc-photo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sc-photo-group { padding: 12px 14px; }
.sc-photo-head { display: flex; align-items: center; gap: 10px; }
.sc-photo-head .settings-text { flex: 1; min-width: 0; }
/* Подсказки групп — целиком, под заголовком (в is-static подпись по умолчанию сверху и в одну строку) */
.sc-photo-head .settings-text small, .settings-row.cls-text-row .settings-text small { order: 0; white-space: normal; }
.cls-group .cls-group-name { max-width: 320px; margin-bottom: 4px; }
.sc-photo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.sc-photo-row.is-cover { grid-template-columns: 1fr; }
.sc-photo { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--wd-border); }
.sc-photo-row.is-cover .sc-photo { aspect-ratio: 16 / 9; }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-photo-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.sc-photo-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 30px; padding: 0; }
/* 0.12 (Н-59): список быстрых клавиш (js/hotkeys.js, Shift+?) — стекло wdDialog, клавиша | действие */
.hk-box { max-width: 420px; }
.hk-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; margin-top: 12px; }
.hk-list kbd, .help-keys kbd {
    min-width: 30px; padding: 3px 8px; border-radius: 8px; text-align: center; font: 600 13px/1.4 inherit;
    color: var(--wd-text); background: var(--wd-surface-2, rgba(127,127,127,.14)); border: 1px solid var(--wd-border);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.hk-list span { font-size: 14px; }
.hk-note { margin-top: 12px; font-size: 12px; color: var(--wd-text-subtle); }
/* 0.12 (B15): «Быстрые клавиши» — свои сочетания; ПК — две колонки */
.hk-row { gap: 8px; }
.hk-key { min-width: 120px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--wd-border); background: var(--wd-surface-2);
    color: var(--wd-text); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; cursor: pointer; }
.hk-key:hover { border-color: var(--wd-primary); }
.hk-key.is-off { color: var(--wd-text-muted); font-family: inherit; font-weight: 400; }
.hk-key.is-capturing { border-color: var(--wd-primary); color: var(--wd-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary) 25%, transparent); }
.hk-key.is-dup { border-color: var(--wd-danger); color: var(--wd-danger); }
@media (min-width: 1200px) {
    main.main-content:has(.hk-setup) { max-width: none; }
    .hk-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .hk-grid .hk-row:nth-child(odd) { border-right: 1px solid var(--wd-border); }
}

/* 0.12: шестерёнка периода показателей на главной — в правом верхнем углу плашки, меню поверх */
.home-stats { position: relative; }
.hs-period { position: absolute; top: 6px; right: 6px; z-index: 2; }
/* Шестерёнка в правом верхнем углу карточки выручки (синяя карточка — белый значок); «ср. чек» на телефоне — левее неё */
.home-rev.has-gear { position: relative; }
.home-rev .hs-period-btn { color: rgba(255, 255, 255, .85); }
.home-rev .hs-period-btn:hover, .home-rev .hs-period[open] .hs-period-btn { background: rgba(255, 255, 255, .18); color: #fff; }
.home-rev.has-gear .stat-avg2 { right: 44px; }
.hs-period-btn { list-style: none; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
    color: var(--wd-text-muted); font-size: 16px; }
.hs-period-btn::-webkit-details-marker { display: none; }
.hs-period-btn:hover, .hs-period[open] .hs-period-btn { background: var(--wd-surface-2); color: var(--wd-text); }
/* Меню периода — стекло (glass.css); открытое меню скрипт главной переносит в body и ставит у шестерёнки (position: fixed) */
.hs-period-menu { position: absolute; right: 0; top: 36px; z-index: var(--wd-z-popover); min-width: 150px; padding: 6px; border-radius: 14px;
    border: 1px solid var(--wd-border); display: flex; flex-direction: column; gap: 2px; }
.hs-period-menu.is-floating { position: fixed; right: auto; }
.hs-period-item { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: var(--wd-text); font: inherit; cursor: pointer; }
.hs-period-item:hover { background: var(--wd-surface-2); }
.hs-period-item.is-active { background: var(--wd-primary-light); color: var(--wd-primary-dark); font-weight: 600; }

/* 0.12 (Н-15): «Отчёты → Прибыль» — водопад сверху вниз, срезы карточками, на ПК — сетка */
.pf-grid { display: grid; gap: 12px; }
@media (min-width: 992px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-wide { grid-column: 1 / -1; } }
/* 0.12: «Прибыль» на широком ПК — три колонки, страница шире; «Каждый заказ» — во всю ширину, имя клиента не режется */
@media (min-width: 1200px) {
    main.main-content:has(.pf-page) { max-width: 1400px; }
    .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.pf-orders td.pf-client { white-space: nowrap; }
.pf-orders td.pf-client a { color: inherit; }
.pf-line, .pf-sub { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.pf-line b, .pf-sub b, .pf-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-line.is-minus, .pf-table .is-minus { color: var(--wd-danger); }
.pf-line.is-strong { font-weight: 700; border-top: 1px solid var(--wd-border); }
.pf-line.is-total { font-size: 17px; font-weight: 800; border-top: 2px solid var(--wd-border-strong); margin-top: 4px; padding-top: 8px; }
.pf-sub { padding-left: 14px; font-size: 13px; color: var(--wd-text-muted); }
.pf-sub small { color: var(--wd-text-subtle); }
.pf-note { font-style: italic; }
.pf-line-details > summary { list-style: none; cursor: pointer; }
.pf-line-details > summary::-webkit-details-marker { display: none; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-table th { text-align: right; font-weight: 600; color: var(--wd-text-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 4px 6px; }
.pf-table td { text-align: right; padding: 5px 6px; border-top: 1px dashed var(--wd-border); }
.pf-table th:first-child, .pf-table td:first-child { text-align: left; white-space: normal; }
.pf-scroll { max-height: 460px; overflow: auto; }

/* 0.12: клиент-организация — реквизиты, контактные лица, акты (Clients/Details) */
.cd-legal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cd-legal-req { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--wd-text-muted); }
.cd-legal-req b { color: var(--wd-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-legal-line { font-size: 13px; color: var(--wd-text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.cd-legal-sub { margin: 12px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-subtle); }
.cd-contact { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--wd-border); }
.cd-contact-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; min-width: 0; }
.cd-contact-body small { color: var(--wd-text-muted); }
.cd-contact-body a { font-size: 13px; }
.cd-contact-add { margin-top: 6px; }
.cd-contact-add > summary { list-style: none; }
.cd-contact-add > summary::-webkit-details-marker { display: none; }
.cd-act-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--wd-border); color: var(--wd-text); text-decoration: none; font-size: 14px; }
/* 0.13 (C6, C7): контрагент в карточке клиента и плашки долга в шапке */
.cd-terms > summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.cd-terms-sum { font-size: 12px; font-weight: 500; color: var(--wd-text-muted); text-transform: none; letter-spacing: 0; }
.cd-terms-form { margin-top: 10px; }
.cd-role { cursor: pointer; gap: 6px; }
.cd-role input { margin: 0; }
.cd-role:has(input:checked) { background: color-mix(in srgb, var(--wd-primary) 14%, var(--wd-surface)); border-color: var(--wd-primary); color: var(--wd-primary); }
.cd-terms-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.cd-debts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cd-debts .pill { text-decoration: none; }
/* 0.13 (C7): «В долг» в блоке оплаты чека */
.debt-box { padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: color-mix(in srgb, var(--wd-warning) 9%, var(--wd-surface)); border: 1px solid color-mix(in srgb, var(--wd-warning) 28%, var(--wd-border)); }
.debt-box .form-check-label { font-weight: 650; }
.debt-info { font-size: 12px; color: var(--wd-text-muted); }
/* Чек: плашка долга и оплаты «позже» */
.receipt-debt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px;
    border-radius: 12px; background: color-mix(in srgb, var(--wd-warning) 12%, var(--wd-surface)); font-size: 14px; }
.receipt-debt.is-overdue { background: color-mix(in srgb, var(--wd-danger) 12%, var(--wd-surface)); color: var(--wd-danger); }
.receipt-pay-part.is-later small { color: var(--wd-text-muted); }
/* «Финансы → Долги» */
.debt-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.debt-kpi { padding: 10px 14px; border-radius: var(--wd-radius); background: var(--wd-surface); border: 1px solid var(--wd-border); box-shadow: var(--wd-edge), var(--wd-shadow); }
.debt-kpi small { display: block; font-size: 12px; color: var(--wd-text-muted); }
.debt-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.debt-kpi.is-bad b { color: var(--wd-danger); }
.debt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.debt-row { border-radius: var(--wd-radius); background: var(--wd-surface); border: 1px solid var(--wd-border); box-shadow: var(--wd-edge), var(--wd-shadow); }
.debt-row.is-overdue { border-color: color-mix(in srgb, var(--wd-danger) 45%, var(--wd-border)); }
.debt-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.debt-row > summary::-webkit-details-marker { display: none; }
.debt-name { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.debt-sum small { display: block; font-size: 12px; color: var(--wd-text-muted); }
.debt-body { padding: 0 14px 12px; border-top: 1px dashed var(--wd-border); }
.debt-sub { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.debt-card-link { display: inline-block; margin-top: 8px; font-size: 13px; }
.debt-order, .debt-move { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--wd-border); }
.debt-order:last-child, .debt-move:last-child { border-bottom: none; }
.debt-order.is-overdue > span { color: var(--wd-danger); }
.debt-move b { font-variant-numeric: tabular-nums; }
.debt-pay-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.debt-pay-form input[name=amount] { width: 120px; }
.debt-pay-form input[name=docNo] { flex: 1 1 140px; min-width: 0; }
.pay-later-m { cursor: pointer; gap: 6px; }
.pay-later-m input { margin: 0; }
.pay-later-m:has(input:checked) { background: color-mix(in srgb, var(--wd-primary) 14%, var(--wd-surface)); border-color: var(--wd-primary); color: var(--wd-primary); }
.sup-card-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 14px; font-weight: 600;
    background: color-mix(in srgb, var(--wd-primary) 10%, var(--wd-surface)); color: var(--wd-primary); text-decoration: none; }

/* 0.12 (Н-20, Н-22, Н-23): карточка клиента — надёжность, сверка с аккаунтом, статистика (свёрнутые блоки) */
.cd-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; }
.cd-fold::-webkit-details-marker { display: none; }
.cd-fold::after { content: "▾"; color: var(--wd-text-subtle); font-size: 12px; margin-left: 4px; transition: transform .15s; }
details[open] > .cd-fold::after { transform: rotate(180deg); }
.cd-fold > span:first-child { flex: 1; }
.cd-rel-list { margin-top: 8px; max-height: 320px; overflow: auto; }
.cd-rel-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--wd-border); font-size: 14px; }
.cd-rel-ico { width: 22px; text-align: center; flex: 0 0 auto; }
.cd-rel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-rel-text small { color: var(--wd-text-muted); font-size: 12px; }
.cd-rel-comment { overflow-wrap: anywhere; color: var(--wd-text) !important; }
.cd-rel-pts { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wd-text-subtle); }
.cd-rel-pts.is-plus { color: var(--wd-success, #16a34a); }
.cd-rel-pts.is-minus { color: var(--wd-danger, #dc2626); }
.cd-rel-form { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.cd-rel-form .btn { grid-column: 1 / -1; }
.cd-sync-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.cd-sync-row input { margin-top: 4px; }
.cd-sync-row s { color: var(--wd-text-muted); }
.cd-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; }
.cd-stats-grid > div { display: flex; flex-direction: column; min-width: 0; }
.cd-stats-grid b { font-size: 15px; overflow-wrap: anywhere; }
.cd-stats-grid small { color: var(--wd-text-muted); font-size: 12px; }

/* 0.12 (Н-26): объединение типоразмеров по цене (Settings/Sizes) */
.size-merge { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--wd-text-muted); }
.size-merge .form-select { width: auto; max-width: 220px; }
.size-merge-note { margin-top: 6px; font-size: 12px; color: var(--wd-text-muted); }

/* 0.12 (Н-54): классы автомобилей (Settings/Classes) — код и своё название; классы модели (Settings/CarModels) */
/* Ревью 15.10: класс — компактной карточкой: [буква] имя + силуэт / машин · примеры / цена · [тумблер].
   Телефон — карточки столбиком, ПК — две колонки; страница — во всю ширину */
.cls-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cls-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "badge main sw" "badge price sw";
    gap: 6px 12px; align-items: center; padding: 10px 12px 10px 10px; background: var(--wd-surface); border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius); box-shadow: var(--wd-edge), var(--wd-shadow); transition: border-color .15s, opacity .15s; }
.cls-card:hover { border-color: var(--wd-border-strong); }
.cls-badge { grid-area: badge; align-self: start; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: var(--wd-primary-light); color: var(--wd-primary); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cls-main { grid-area: main; min-width: 0; }
.cls-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cls-sil { width: 52px; height: 20px; flex-shrink: 0; fill: var(--wd-text-muted); opacity: .7; margin-left: auto; }
.cls-meta { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 7px; }
.cls-meta b { font-weight: 600; color: var(--wd-text); }
.cls-price { grid-area: price; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 7px; font-size: 12px; color: var(--wd-text-muted); }
.cls-price-cap { flex-shrink: 0; }
.cls-price .wd-select, .cls-price > select { flex: 0 1 240px; min-width: 0; }
.cls-price .wd-select-btn { min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: 999px; }
.cls-price-note b { color: var(--wd-text); font-weight: 600; }
.cls-sw { grid-area: sw; }
.cls-card.is-off { opacity: .62; }
.cls-card.is-off .cls-badge { background: var(--wd-surface-2); color: var(--wd-text-muted); }
/* Имя — текстом, поле видно при наведении и правке */
.form-control.cls-inline { flex: 1 1 auto; min-width: 0; max-width: 300px; padding: 3px 6px; font-size: 15px; font-weight: 650; color: var(--wd-text);
    background-color: transparent; border-color: transparent; box-shadow: none; border-radius: 8px; }
.form-control.cls-inline:hover:not(:disabled) { border-color: var(--wd-border); }
.form-control.cls-inline:focus { background-color: var(--wd-surface); border-color: rgba(var(--wd-primary-rgb), .9); box-shadow: 0 0 0 3px rgba(var(--wd-primary-rgb), .18); }
.form-control.cls-inline:disabled { background: transparent; opacity: 1; }
.form-control.cls-inline::placeholder { color: var(--wd-text); opacity: .9; }
.cls-row.is-saved .cls-name { border-color: var(--wd-success); }
/* Ценовые группы — карточками */
.cls-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 16px; }
.cls-gcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--wd-surface); border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius); box-shadow: var(--wd-edge), var(--wd-shadow); }
.cls-gcard.is-new { border-style: dashed; box-shadow: none; background: transparent; justify-content: center; }
.cls-gcard-top { display: flex; align-items: center; gap: 8px; }
.cls-gcard-ico { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--wd-surface-2); font-size: 16px; }
.cls-gcard-top .form-control.cls-inline { max-width: none; }
.cls-gcard-members { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 40px; min-height: 24px; align-items: center; }
.cls-gcard-members small { font-size: 12px; color: var(--wd-text-muted); }
.cls-mini { min-width: 26px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px;
    background: var(--wd-primary-light); color: var(--wd-primary); font-size: 12px; font-weight: 700; }
.cls-mini.is-off { background: var(--wd-surface-2); color: var(--wd-text-muted); }
@media (min-width: 992px) {
    main.main-content:has(.cls-page) { max-width: none; }
    .cls-page > .settings-hint { max-width: 980px; }
    .cls-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cls-groups { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.cm-class { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cm-class .form-select { width: auto; max-width: 240px; }

/* 0.12 (Н-28, Q15): подсказки моделей с силуэтом кузова (car-catalog.js) */
.car-suggest-wrap { position: relative; }
.car-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 260px; overflow: auto; margin: 0; padding: 4px; list-style: none;
    background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-sm, 10px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.car-suggest[hidden] { display: none; }
/* 0.12 (Н-66): внутри формы и окна у стекла нет «страницы под ним» — список был прозрачным; плотное стекло окон */
.car-suggest { background: var(--wd-glass-modal, var(--wd-surface-solid)) !important; }
/* 0.12 (Н-43): прокрутка пальцем внутри списка (не страницы под ним); не помещается снизу — вверх от поля */
.car-suggest { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.car-suggest.is-up { top: auto; bottom: calc(100% + 2px); }
.car-suggest-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px;
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { .car-suggest-item { min-height: 42px; font-size: 15px; } }

/* 0.12 (Н-44): порядок списка (Shared/_SortPick) — таблетка «⇅ Новые сначала» справа от поиска; меню — wd-select */
.wd-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wd-search-row > .search-box { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.wd-sort { display: inline-flex; align-items: center; flex: 0 0 auto; height: 36px; padding-left: 11px; border: 1px solid var(--wd-border);
    border-radius: 999px; background: var(--wd-surface); color: var(--wd-text); }
.wd-sort[hidden] { display: none; }
.wd-sort:hover, .wd-sort:focus-within { border-color: var(--wd-primary); }
.wd-sort-ico { font-size: 14px; opacity: .7; }
.wd-sort .wd-select { display: inline-block; }
.wd-sort > select.form-select, .wd-sort .wd-select-btn { width: auto; max-width: 170px; min-height: 0; height: 34px; padding: 0 10px 0 6px; gap: 6px;
    border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 13px; font-weight: 600; }
/* Узкий телефон: только «⇅ ▾» — место отдаём строке поиска; выбранный порядок виден в открытом списке */
@media (max-width: 420px) {
    .wd-sort > select.form-select, .wd-sort .wd-select-btn { max-width: 118px; }
    .wd-sort .wd-select-label { display: none; }
}
.car-suggest-item.is-active, .car-suggest-item:hover { background: var(--wd-surface-2); }
.car-suggest-item svg { width: 44px; height: 16px; flex: 0 0 auto; fill: currentColor; color: var(--wd-text-muted); }
.car-suggest-item small { margin-left: auto; color: var(--wd-text-subtle); font-size: 11px; white-space: nowrap; }

/* 0.12 (Н-24): справочник марок/моделей предприятия (Settings/CarModels) */
.cm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--wd-border); }
.cm-row:first-child { border-top: 0; }
/* Только силуэт строки: правило «.cm-row svg» раздувало и стрелку выпадающего списка класса (ревью 15.10) */
.cm-row > svg { width: 48px; height: 18px; flex: 0 0 auto; fill: currentColor; color: var(--wd-text-muted); }
.cm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-row-text small { color: var(--wd-text-muted); font-size: 12px; }
.cm-edit { margin-top: 6px; }
.cm-edit > summary { list-style: none; cursor: pointer; }
.cm-edit > summary::-webkit-details-marker { display: none; }
/* Ревью 15.10: справочник машин (Settings/CarModels, Admin/CarCatalog) — живой поиск, найденное карточками;
   ПК — во всю ширину, карточки в 2–3 колонки */
.cm-search { margin-bottom: 12px; }
.cm-start { padding: 18px 4px; font-size: 14px; color: var(--wd-text-muted); text-align: center; }
.cm-grid { display: flex; flex-direction: column; gap: 8px; }
.cm-card { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--wd-border); border-radius: var(--wd-radius); background: var(--wd-surface);
    box-shadow: var(--wd-edge), var(--wd-shadow); }
.cm-card:first-child { border-top: 1px solid var(--wd-border); }
.cm-card > svg { margin-top: 4px; }
.cm-card .cm-row-text b { font-size: 15px; }
.cm-card .cm-class { margin-top: 8px; }
.cm-card .cm-class .wd-select { flex: 1 1 160px; max-width: 240px; }
.cm-card .cm-class .wd-select-btn, .cc-results .car-cat-row .wd-select-btn { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.cm-card .cm-class .btn { padding: 4px 10px; }
@media (min-width: 992px) {
    main.main-content:has(.cm-page) { max-width: none; }
    .cm-page > .settings-hint { max-width: 1000px; }
    .cm-search { max-width: 640px; }
    .cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: start; }
    .cm-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 20px; align-items: start; }
    .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 0 12px; align-items: start; }
    .cc-results .car-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)); }
    .cc-results .car-model { border-top: 0; border-bottom: 1px solid var(--wd-border); }
    .cc-results .car-brands { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ---------- Админка AluHub на ПК (ревью 15.10): во всю ширину, списки — карточками в колонки ----------
   .adm-grid — группа строк превращается в сетку карточек; .is-wide — карточки шире (предприятия, аккаунты, отзывы) */
@media (min-width: 992px) {
    main.main-content:has(.adm-page) { max-width: none; }
    .adm-page .admin-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
    .adm-page .admin-tile { padding: 14px 16px; }
    .adm-page .admin-tile b { font-size: 26px; }
    .adm-page .admin-tile span { font-size: 13px; }

    .adm-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-bottom: 18px; }
    .adm-top > .rep-hero { margin: 0; display: flex; flex-direction: column; justify-content: center; }
    .adm-top > .admin-tiles { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .settings-group.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px;
        background: none; border: 0; box-shadow: none; overflow: visible; }
    .settings-group.adm-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
    .settings-group.adm-grid > * { margin: 0; border: 1px solid var(--wd-border); border-radius: var(--wd-radius);
        background: var(--wd-surface); box-shadow: var(--wd-edge), var(--wd-shadow); }
    .settings-group.adm-grid > * + * { border-top: 1px solid var(--wd-border); }
    .settings-group.adm-grid > a:hover, .settings-group.adm-grid > form:hover { border-color: var(--wd-primary); }
    .settings-group.adm-grid > form > .admin-co { border-radius: inherit; }

    .adm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
    .adm-cols > div { min-width: 0; }

    /* Поиск и фильтры одной строкой; одиночный поиск — не во всю ширину */
    .adm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .adm-bar > .search-box { flex: 0 1 460px; margin: 0 !important; }
    .adm-bar > .chip-row { flex: 1 1 auto; margin: 0; }
    .adm-search { max-width: 640px; }
    .adm-submit { max-width: 420px; }
    .adm-page .mod-filter { flex-direction: row; align-items: center; }
    .adm-page .mod-filter .search-box { flex: 0 1 520px; }
    .adm-page .mod-filter .form-select { width: auto; min-width: 220px; }
    .adm-chips { display: flex; flex-wrap: wrap; gap: 0 24px; }

    /* Карточка предприятия: слева сводка (прилипает), справа вкладки */
    .adm-co-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
    .adm-co-side { position: sticky; top: calc(var(--wd-topbar-h, 64px) + 12px); }
    .adm-co-side .admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-co-main > .seg { max-width: 560px; }

    /* Справочник машин: пояснение и импорт одной строкой */
    .cc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; align-items: center; margin-bottom: 12px; }
    .cc-head > .settings-hint { margin: 0; max-width: none; }
    .cc-head > form { margin: 0 !important; }
    .cc-body-filter { max-width: 420px; }
}
.salary-lines .is-plus b { color: var(--wd-success, #16a34a); }
.salary-lines .is-minus b { color: var(--wd-danger, #dc2626); }
.salary-adjust { border-top: 1px solid var(--wd-border); }
.salary-adjust > summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--wd-primary); cursor: pointer; list-style: none; }
.salary-adjust > summary::-webkit-details-marker { display: none; }
.salary-adjust-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.salary-adjust-form > * { flex: 1 1 140px; min-width: 0; }
.salary-adjust-form > .btn { flex: 0 0 auto; }
.salary-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.salary-table td, .salary-table th { padding: 8px 14px; border-top: 1px solid var(--wd-border); vertical-align: top; }
.salary-table th { font-size: 12px; font-weight: 600; color: var(--wd-text-muted); text-align: left; border-top: 0; }
.salary-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) { .salary-lines, .emp-card-edit { padding-left: 14px; } }
.pay-scheme { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.pay-scheme label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--wd-text-muted); margin: 0; }
.pay-scheme .pay-check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--wd-text); }
.pay-scheme > .btn { grid-column: 1 / -1; justify-self: start; }
.pay-emp > summary { list-style: none; cursor: pointer; }
.pay-emp > summary::-webkit-details-marker { display: none; }
.pay-emp + .pay-emp { border-top: 1px solid var(--wd-border); }
.pay-service { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.pay-service-input { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pay-service-input .form-control { width: 80px; text-align: right; }
.emp-role-select { height: 30px; max-width: 132px; padding: 0 24px 0 10px; border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface-2) 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' stroke='%2394a3b8' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--wd-text); font: inherit; font-size: 12px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Модерация: фильтр (поиск + мойка) и карточка отзыва с действиями */
.mod-filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.mod-filter .search-box { margin: 0; }
.mod-card { padding: 12px 14px; }
.mod-card + .mod-card { border-top: 1px solid var(--wd-border); }
.mod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mod-company { font-size: 13px; font-weight: 600; color: var(--wd-text); text-decoration: none; }
.mod-date { margin-left: auto; font-size: 12px; color: var(--wd-text-muted); }
.mod-text { margin: 6px 0 4px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.mod-meta { font-size: 12px; color: var(--wd-text-muted); }
.mod-actions { display: flex; gap: 8px; margin-top: 8px; }
.mod-actions form { flex: 1; }
.mod-actions .btn { width: 100%; }
.company-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.company-head-info { flex: 1; min-width: 0; }
.company-head-name { font-size: 16px; font-weight: 700; color: var(--wd-text); }
.company-head-phones { font-size: 13px; color: var(--wd-text-muted); margin-top: 2px; word-break: break-word; }

/* ---------- Кнопка темы и сайдбар ---------- */
.theme-top-btn { background: transparent; border: none; padding: 6px; border-radius: 10px; cursor: pointer; line-height: 1; font-size: 18px; color: inherit; flex-shrink: 0; transition: opacity .15s ease, transform .15s ease; }
.theme-top-btn:hover { opacity: .75; }
.theme-top-btn:active { transform: scale(.9); }
.sidebar-logo-link { display: block; text-decoration: none; color: inherit; flex: 1; min-width: 0; transition: opacity .15s ease; }
.sidebar-logo-link:hover { opacity: .85; color: inherit; }
.sidebar-logo-link:active { transform: scale(.98); }

/* ---------- Формы: пароль, disabled ---------- */
.form-control:disabled, .form-control[readonly] { background: var(--wd-surface-2); color: var(--wd-text-muted); border-color: var(--wd-border); opacity: .8; cursor: not-allowed; }
.pwd-wrap { position: relative; }
.pwd-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--wd-text-muted); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; }
.pwd-strength { height: 6px; border-radius: 3px; background: var(--wd-surface-2); margin-top: 6px; overflow: hidden; }
.pwd-bar { height: 100%; width: 0%; border-radius: 3px; transition: width .3s ease, background .3s ease; }
.pwd-bar.weak { background: var(--wd-danger); }
.pwd-bar.medium { background: var(--wd-warning); }
.pwd-bar.strong { background: var(--wd-success); }
.pwd-hints { font-size: 12px; margin-top: 4px; color: var(--wd-text-muted); line-height: 1.5; }
.pwd-hints span { display: block; }
.pwd-hints .hint-ok { color: var(--wd-success); font-weight: 600; }
.pwd-hints .hint-fail { color: var(--wd-danger); }

/* ---------- Глобальный оверлей загрузки (раскладка — css/splash.css, как у экрана запуска) ---------- */
.wd-overlay { background: var(--wd-overlay-bg); backdrop-filter: var(--wd-overlay-blur); -webkit-backdrop-filter: var(--wd-overlay-blur); display: none; opacity: 0; transition: opacity .2s ease; }
.wd-overlay.active { display: block; animation: wd-overlay-in .2s ease forwards; }
@keyframes wd-overlay-in { to { opacity: 1; } }
.wd-overlay .wd-splash-msg { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.wd-overlay.wd-warning .wd-splash-msg { opacity: 1; transform: translateY(0); }
.wd-overlay.wd-warning .wd-splash-spinner { animation-duration: 1.2s; }

/* 0.11: выпадающие подсказки DaData (реквизиты, банк, адрес) */
.dd-list { position: relative; z-index: 20; margin-top: 4px; border: 1px solid var(--wd-border); border-radius: 12px; overflow: hidden;
           background: var(--wd-surface); box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 320px; overflow-y: auto; }
.dd-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--wd-border);
           background: transparent; color: var(--wd-text); }
.dd-item:hover { background: color-mix(in srgb, var(--wd-primary) 10%, transparent); }
.dd-item small { display: block; color: var(--wd-text-muted, #888); }
.dd-empty { padding: 8px 12px; color: var(--wd-text-muted, #888); }

/* ---------- Каталог услуг и корзина ---------- */
/* 0.11: в чеке сфера → группа → услуги (wash-cart.js renderNav) */
.cat-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cat-nav .cat-spheres { flex: 1 1 auto; margin: 0; }
.cat-nav .chip:disabled { opacity: .45; cursor: not-allowed; }
.cat-tools { display: flex; gap: 6px; margin-left: auto; }
.cat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cat-group { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--wd-border);
             border-radius: 12px; background: var(--wd-surface); color: var(--wd-text); font-weight: 600; text-align: left; }
.cat-group small { color: var(--wd-text-muted, #888); font-weight: 400; }
.cat-group:hover { border-color: var(--wd-primary); }
.cat-back { margin-bottom: 4px; }
.cart-item.need-price .cart-price-input { border-color: var(--wd-danger, #d8392f); }
.svc-catalog-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--wd-border); border-radius: 10px; margin-bottom: 8px; background: var(--wd-surface); color: var(--wd-text); max-height: 90px; transition: max-height .3s ease, opacity .3s ease, margin .3s ease, padding .3s ease, transform .3s ease, border-color .15s; }
.svc-catalog-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; color: var(--wd-text); }
.svc-catalog-price { font-size: 13px; color: var(--wd-text-muted); margin: 0 10px; white-space: nowrap; }
.svc-add-btn { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--wd-primary); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .25s ease, transform .25s ease; }
.svc-add-btn.added { background: var(--wd-success); }
.svc-add-btn.pop { animation: wdpop .3s ease; }
/* Сворачивание списка до выбранного (машины и пакеты в новой мойке; JS wdCollapse) */
.wd-col-item { transition: opacity .15s ease, transform .15s ease, border-color .15s ease; }
.wd-col-item.wd-col-fade { opacity: 0; transform: scale(.92); pointer-events: none; }
.wd-col-item.wd-col-hidden { display: none !important; }
/* Свёрнутый список машин: выбранная — по центру строки, шириной в одну колонку */
.veh-tile-grid.is-col { grid-template-columns: minmax(0, calc(50% - 4px)); justify-content: center; }
/* Пока высота сетки анимируется, строки не растягиваются — иначе плитка (кнопка центрирует содержимое)
   «проваливается» в середину высоты и потом прыгает обратно */
.veh-tile-grid { align-content: start; align-items: start; }
.wd-col-hint { font-size: 12px; color: var(--wd-text-muted); text-align: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .25s ease, margin .25s ease; }
.wd-col-hint.show { max-height: 20px; opacity: 1; margin-top: 4px; }
/* Выбранный пакет: подсветка; в свёрнутом списке — подсказка «сменить ▾» */
/* Фон непрозрачный: под выбранным лежат свёрнутые пакеты — они не должны просвечивать */
.svc-catalog-item.pkg-chosen { border-color: var(--wd-primary); background: color-mix(in srgb, var(--wd-primary) 10%, var(--wd-surface)); }
.svc-add-btn:active { transform: scale(.88); }
/* Пакеты «лесенкой» (JS pkgStack): выбранный сверху, остальные под ним — уже, темнее, выглядывают снизу */
.pkg-list { position: relative; transition: height .38s cubic-bezier(.2,.8,.2,1); }
.pkg-list .svc-catalog-item { position: relative; transform-origin: center bottom; transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .38s ease, opacity .3s ease, border-color .15s ease, background .15s ease; }
.pkg-list .svc-catalog-item.pkg-behind { pointer-events: none; }
.pkg-list.no-anim, .pkg-list.no-anim .svc-catalog-item { transition: none !important; }
.pkg-change-hint { display: none; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--wd-primary); }
.pkg-list.is-col .pkg-chosen { cursor: pointer; }
.pkg-list.is-col .pkg-chosen .pkg-change-hint { display: inline; }
body.dark .svc-catalog-item.pkg-chosen { background: color-mix(in srgb, var(--wd-primary) 14%, var(--wd-surface)); }
.catalog-section-title { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--wd-text-muted); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.catalog-section-title:first-child { margin-top: 0; }
.catalog-empty { text-align: center; padding: 12px; color: var(--wd-text-muted); font-size: 13px; font-style: italic; }
.cart-item { border: 1px solid var(--wd-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--wd-surface); color: var(--wd-text); }
.cart-item.wash-package { border-left: 3px solid var(--wd-primary); }
.cart-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cart-item-name { font-size: 14px; font-weight: 500; color: var(--wd-text); }
.cart-item-badge { display: inline-block; font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--wd-primary); color: #fff; margin-left: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.cart-remove { background: none; border: none; color: var(--wd-danger); font-size: 16px; cursor: pointer; }
.cart-item-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qty-group { display: flex; align-items: center; border: 1px solid var(--wd-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.qty-btn { width: 30px; height: 30px; border: none; background: transparent; color: var(--wd-text); font-size: 16px; cursor: pointer; }
.qty-val { width: 30px; text-align: center; font-size: 14px; font-weight: 600; color: var(--wd-text); }
.price-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cart-price-input { width: 92px; min-width: 92px; height: 30px; padding: 0 8px; font-size: 14px; text-align: right; background: var(--wd-bg); color: var(--wd-text); border: 1px solid var(--wd-border); border-radius: 8px; -moz-appearance: textfield; appearance: textfield; }
.cart-price-input::-webkit-outer-spin-button, .cart-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-cur { font-size: 14px; color: var(--wd-text-muted); line-height: 30px; }
/* Пункт 14: цена без права менять — серым; переключатель скидки по карте у позиции */
.price-wrap.is-locked .cart-price-input { opacity: .6; pointer-events: none; background: transparent; }
.cart-disc { flex-shrink: 0; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface);
    color: var(--wd-text-muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cart-disc.is-on { background: color-mix(in srgb, var(--wd-success) 16%, var(--wd-surface)); border-color: color-mix(in srgb, var(--wd-success) 55%, var(--wd-border)); color: var(--wd-success); }
.cart-disc.is-locked { opacity: .55; cursor: not-allowed; }
/* 0.13 (B1): ручная скидка — «🏷» у позиции, старая сумма зачёркнута; строка «Скидка вручную» в итоге */
.cart-off { flex-shrink: 0; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface);
    font-size: 13px; font-weight: 600; color: var(--wd-text-muted); cursor: pointer; white-space: nowrap; }
.cart-off.is-on { background: color-mix(in srgb, var(--wd-success) 16%, var(--wd-surface)); border-color: color-mix(in srgb, var(--wd-success) 55%, var(--wd-border)); color: var(--wd-success); }
.cart-line-old { color: var(--wd-text-muted); font-weight: 400; font-size: 12px; margin-right: 4px; }
.md-row { align-items: center; }
.md-open { background: none; border: none; padding: 0; color: var(--wd-primary); font: inherit; cursor: pointer; text-align: left; }
.md-open:hover { text-decoration: underline; }
/* 0.13 (B4): хронология заказа — в чеке и в предпросмотре */
.wtl > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wtl-count { font-size: 12px; font-weight: 600; color: var(--wd-text-muted); padding: 0 6px; border-radius: 99px; background: var(--wd-surface-2); }
.wtl-list { list-style: none; margin: 10px 0 0; padding: 0; position: relative; }
.wtl-list::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--wd-border); }
.wtl-item { display: flex; gap: 10px; padding: 4px 0; position: relative; }
.wtl-ico { flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--wd-surface); border: 1px solid var(--wd-border); font-size: 14px; z-index: 1; }
.wtl-body { flex: 1; min-width: 0; font-size: 14px; }
.wtl-head { display: flex; justify-content: space-between; gap: 8px; }
.wtl-head time { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wtl-text { font-size: 13px; }
.wtl-who { font-size: 12px; color: var(--wd-text-muted); }
.wk-prev .wtl { margin-top: 10px !important; padding: 8px 10px; box-shadow: none; }
.md-reason { gap: 6px; }
.md-reason-del { border: none; background: none; padding: 0 2px; color: var(--wd-text-muted); cursor: pointer; font-size: 12px; }
.md-reason-del:hover { color: var(--wd-danger); }
.md-combine { cursor: pointer; gap: 6px; }
.md-combine input { margin: 0; }
.md-combine:has(input:checked) { background: color-mix(in srgb, var(--wd-primary) 14%, var(--wd-surface)); border-color: var(--wd-primary); color: var(--wd-primary); }
/* 0.11: исполнитель позиции — чип «👤 все / Иван» и меню с галочками (стеклянное — glass.css) */
.cart-perf { flex-shrink: 1; min-width: 0; max-width: 140px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); color: var(--wd-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-perf.is-set { color: var(--wd-primary); border-color: color-mix(in srgb, var(--wd-primary) 50%, var(--wd-border)); }
.cart-perf-menu { position: fixed; z-index: var(--wd-z-popover, 5100); width: 240px; padding: 8px; border-radius: 14px; border: 1px solid var(--wd-border); background: var(--wd-surface); }
.cart-perf-title { padding: 2px 6px 6px; font-size: 12px; font-weight: 700; color: var(--wd-text-muted); }
.cart-perf-opt { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.cart-perf-opt:hover { background: var(--wd-surface-2); }
.cart-perf-hint { padding: 6px 6px 2px; font-size: 11px; color: var(--wd-text-subtle); }
.cart-line-total { margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--wd-text); }
.summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--wd-text); }

/* «Кнопка занята» (js/busy.js). 0.12 (Н-40): размер кнопки не меняется (ширину и высоту фиксирует busy.js),
   надпись и ∞ — поверх: надпись слева с отступом и «…», ∞ справа с отступом; узкая кнопка — ∞ по центру, без надписи */
.is-busy[aria-busy="true"] { position: relative; overflow: hidden; white-space: nowrap; flex-shrink: 0; cursor: progress !important; opacity: .85; }
.is-busy[aria-busy="true"]:disabled { opacity: .85; }
/* 0.12 (Н-64): ∞ справа на подложке цвета кнопки (background: inherit) — содержимое под ней скрыто и не сдвигается */
.wd-busy-cover { position: absolute; top: 0; right: 0; bottom: 0; width: 58px; background: inherit; border-radius: inherit; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px); mask-image: linear-gradient(to right, transparent, #000 12px); }
.wd-busy-inf { position: absolute; right: 14px; top: 50%; width: 32px; height: 16px; margin-top: -8px; overflow: visible; }
/* Прозрачные и стеклянные кнопки: подложка плотная, иначе надпись просвечивает под ∞ */
:is(.btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-light, .btn-secondary, .btn-link,
    .home-cmd-btn:not(.is-primary), .wd-dialog-btn:not(.is-primary)) > .wd-busy-cover { background: var(--wd-surface-solid); }
.is-busy-narrow > .wd-busy-cover { width: auto; left: 0; -webkit-mask-image: none; mask-image: none; }
.is-busy-narrow .wd-busy-inf { right: auto; left: 50%; margin-left: -16px; }
.wd-busy-inf path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.wd-busy-track { opacity: .22; stroke-width: 5; }
.wd-busy-strip { stroke-width: 9; stroke-dasharray: 22 78; animation: wd-busy-run 1.6s linear infinite, wd-busy-breathe .8s ease-in-out infinite alternate; }
.wd-busy-shine { stroke: #fff !important; opacity: .85; stroke-width: 3; stroke-dasharray: 10 90; animation: wd-busy-run 1.6s linear infinite; animation-delay: -.08s; }
@keyframes wd-busy-run { to { stroke-dashoffset: -100; } }
@keyframes wd-busy-breathe { from { stroke-width: 6; } to { stroke-width: 12; } }
@media (prefers-reduced-motion: reduce) { .wd-busy-strip, .wd-busy-shine { animation-duration: 4s; } }

/* 0.11: окно «Готовые группы» в каталоге */
.wd-dialog-overlay[hidden] { display: none; }
.grp-tpl-list { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 10px 0 14px; }
.grp-tpl-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.grp-tpl-item:hover { background: var(--wd-surface-2); }
.grp-tpl-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 0.11: под недоступной кнопкой — чего не хватает (js/form-guard.js, wdWhy) */
.wd-why { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--wd-text-muted); text-align: center; }
.wd-why[hidden] { display: none; }

/* ---------- SortableJS ---------- */
.service-card { -webkit-user-drag: none; }
/* 0.11: тянуть можно только за ручку ⋮⋮ (handle в SortableJS) — «рука» только над ней, а не над всей карточкой */
.sortable-list.sorting .service-card { -webkit-user-drag: element; cursor: default; }
.sortable-list.sorting .drag-handle:active { cursor: grabbing; }
.sortable-list.sorting .service-card, .sortable-list.sorting .service-card * { transition: none !important; animation: none !important; }
.sort-ghost { opacity: .4; border: 2px dashed var(--wd-primary); border-radius: 8px; background: transparent !important; box-shadow: none !important; }
.sort-chosen { border-color: var(--wd-primary); }
.sortable-fallback { transition: none !important; animation: none !important; opacity: .9 !important; pointer-events: none; z-index: 3000 !important; box-shadow: none !important; border-color: var(--wd-primary) !important; background: var(--wd-surface) !important; }
.drag-handle { display: none; align-items: center; justify-content: center; width: 40px; height: 100%; cursor: grab; color: var(--wd-text-muted); font-size: 24px; user-select: none; touch-action: none; flex-shrink: 0; }
.sortable-list.sorting .drag-handle { display: flex; }
.sortable-list.sorting .service-card-icon { display: none; }
.sortable-list.sorting .service-card { border-color: var(--wd-primary); background: var(--wd-surface-2); }

/* ---------- Люди: пикеры, чипы, карточки ---------- */
.emp-picker-single { position: relative; }
/* Админка: справочник машин */
.car-cat-row { padding: 12px 14px; }
.car-cat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--wd-text-muted); margin-bottom: 8px; }
/* Марки плиткой → модели марки строками с кузовом */
.car-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.car-brand { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--wd-border); border-radius: 12px;
    background: var(--wd-surface); color: var(--wd-text); text-decoration: none; min-width: 0; }
.car-brand:hover { border-color: var(--wd-primary); color: var(--wd-text); }
.car-brand b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-brand span { font-size: 12px; color: var(--wd-text-muted); }
.car-brand .is-warn { color: var(--wd-warning, #d97706); }
.car-models { display: flex; flex-direction: column; border: 1px solid var(--wd-border); border-radius: 12px; background: var(--wd-surface); }
.car-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 420px) minmax(140px, 220px) auto; align-items: center; gap: 8px; padding: 6px 10px;
    border-top: 1px solid var(--wd-border); }
.car-model:first-child { border-top: 0; }
.car-model-name { min-width: 0; }
.car-model-name b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-model-name small { color: var(--wd-text-muted); font-size: 12px; }
.car-model .wd-select-btn { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.car-model.is-saved .body-chip { border-color: var(--wd-success, #16a34a); }
.car-model.is-gone { opacity: .35; pointer-events: none; }
.car-model[hidden], .car-brand[hidden] { display: none; }
.car-model-hide { border: 0; background: none; color: var(--wd-text-muted); font-size: 18px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.car-model-hide:hover { color: var(--wd-danger, #dc2626); background: var(--wd-surface-2); }
@media (max-width: 480px) { .car-model { grid-template-columns: minmax(0, 1fr) auto; } .car-model .body-chips { grid-column: 1 / -1; grid-row: 2; }
    .car-model > .wd-select, .car-model > .car-model-class { grid-column: 1 / -1; grid-row: 3; } }
.car-model.is-saved > .wd-select .wd-select-btn { border-color: var(--wd-success, #16a34a); }
/* 0.11: кузова модели чипами — первый основной, «＋ кузов» добавляет */
.body-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.body-chips-list { display: contents; }
.body-chip { display: inline-flex; align-items: center; border: 1px solid var(--wd-border); border-radius: 999px; background: var(--wd-surface-2); overflow: hidden; }
.body-chip button { border: 0; background: none; color: var(--wd-text); font-size: 13px; padding: 4px 4px 4px 10px; cursor: pointer; }
.body-chip button[data-del] { padding: 4px 9px 4px 4px; color: var(--wd-text-muted); }
.body-chip button[data-del]:hover { color: var(--wd-danger, #dc2626); }
.body-chip.is-main { border-color: var(--wd-primary); }
.body-chip.is-main button[data-main] { font-weight: 600; cursor: default; }
.body-chip small { font-weight: 400; font-size: 11px; color: var(--wd-text-muted); }
.body-chips-empty { font-size: 13px; color: var(--wd-text-muted); }
.body-chips .wd-select { width: auto; min-width: 120px; }
.body-chips .wd-select-btn { min-height: 30px; padding: 3px 10px; font-size: 13px; }
/* Стилизованный выпадающий список (js/wd-select.js) вместо системного <select>.
   Сам select остаётся в форме — прозрачный, но фокусируемый (иначе браузер ругается на required). */
.wd-select { position: relative; display: block; min-width: 0; }
.wd-select.is-compact { display: inline-block; }
/* Узкий список в строке настройки (select.form-select.is-narrow) */
select.is-narrow, .wd-select:has(> select.is-narrow) { max-width: 220px; }
.wd-select-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.wd-select-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--wd-border);
    border-radius: 10px; background: var(--wd-bg); color: var(--wd-text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s; }
.wd-select-btn:hover, .wd-select.is-open .wd-select-btn { border-color: var(--wd-primary); }
.wd-select-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--wd-primary-rgb), .1); border-color: var(--wd-primary); }
.wd-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-select-chev { width: 10px; height: 6px; flex-shrink: 0; color: var(--wd-text-muted); transition: transform .2s; }
.wd-select.is-open .wd-select-chev { transform: rotate(180deg); }
.wd-select.is-disabled .wd-select-btn { opacity: .55; cursor: default; }
/* Компактный вариант — «таблетка» роли в строке сотрудника (как прежний .emp-role-select) */
.wd-select.is-compact .wd-select-btn { min-height: 30px; height: 30px; padding: 0 10px 0 12px; gap: 6px; border-width: 1px; border-radius: 999px;
    background: var(--wd-surface-2); font-size: 12px; font-weight: 600; max-width: 150px; }
.wd-select-menu { position: fixed; z-index: var(--wd-z-popover, 5100); max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); animation: wd-select-in .14s ease; }
@keyframes wd-select-in { from { opacity: 0; transform: translateY(-4px); } }
.wd-select-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent;
    color: var(--wd-text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.wd-select-item > span:first-child { flex: 1; }
.wd-select-item:hover, .wd-select-item:focus-visible { background: var(--wd-surface-2); outline: none; }
.wd-select-item.is-selected { color: var(--wd-primary); font-weight: 600; }
.wd-select-check { opacity: 0; font-weight: 700; }
.wd-select-item.is-selected .wd-select-check { opacity: 1; }
.wd-select-item:disabled { opacity: .4; cursor: default; }
.emp-picker-btn { display: flex; align-items: center; width: 100%; padding: 10px 12px; border: 1.5px solid var(--wd-border); border-radius: 10px; background: var(--wd-bg); color: var(--wd-text); cursor: pointer; font-size: 14px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.emp-picker-btn:hover, .emp-picker-btn:focus { border-color: var(--wd-primary); box-shadow: 0 0 0 3px rgba(var(--wd-primary-rgb),.1); outline: none; }
.emp-picker-btn .emp-option-avatar { flex-shrink: 0; margin-right: 10px; }
.emp-picker-btn .emp-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-picker-btn .emp-picker-role { font-size: 11px; color: var(--wd-text-muted); margin-left: 8px; }
.emp-picker-btn .emp-picker-chevron { color: var(--wd-text-muted); margin-left: 8px; font-size: 14px; transition: transform .2s; }
.emp-picker-btn.show .emp-picker-chevron { transform: rotate(180deg); }
.emp-picker-menu { position: absolute; z-index: 1050; width: 100%; max-height: 300px; overflow-y: auto; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.15); padding: 6px; margin-top: 4px; display: none; }
.emp-picker-menu.show { display: block; }
.emp-option-item { display: flex; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.emp-option-item:hover { background: var(--wd-surface-2); }
.emp-option-item.selected { background: var(--wd-primary-light); }
.emp-option-item .emp-option-avatar { width: 36px; height: 36px; margin-right: 10px; }
.emp-option-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--wd-primary-light); color: var(--wd-primary-dark); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.emp-option-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emp-option-initials { font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.emp-option-avatar-all { font-size: 15px; }
.emp-option-info { flex: 1; min-width: 0; }
.emp-option-name { font-size: 14px; font-weight: 600; color: var(--wd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-option-role { font-size: 11px; color: var(--wd-text-muted); margin-top: 1px; }
.emp-option-check { color: var(--wd-primary); font-size: 18px; font-weight: 700; opacity: 0; transition: opacity .15s; margin-left: 8px; }
.emp-option-item.selected .emp-option-check { opacity: 1; }
.emp-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); margin-bottom: 8px; color: var(--wd-text); flex-wrap: wrap; }
.emp-card .emp-option-avatar { width: 40px; height: 40px; }
.emp-card .emp-option-initials { font-size: 15px; font-weight: 700; }
.emp-card-body { flex: 1 1 160px; min-width: 0; }
.emp-card-title { font-size: 14px; font-weight: 600; color: var(--wd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 2px; }
.emp-role-badge { font-size: 11px; font-weight: 600; color: var(--wd-text-muted); background: var(--wd-surface-2); border: 1px solid var(--wd-border); padding: 2px 10px; border-radius: 10px; white-space: nowrap; margin-left: auto; align-self: flex-start; }
.emp-actions-bottom { flex-basis: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--wd-border); }
.emp-actions-bottom form { display: flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; }
.emp-actions-bottom .form-select { width: auto; }
.emp-actions-bottom .btn { white-space: nowrap; }
.emp-actions-inline { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.emp-actions-inline form { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.emp-actions-inline .form-select { width: auto; }
.emp-actions-inline .btn { white-space: nowrap; }
.emp-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: var(--wd-surface-2); border: 1px solid var(--wd-border); border-radius: 22px; max-width: 100%; }
.emp-chip-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--wd-primary-light); color: var(--wd-primary-dark); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.emp-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Чип машины без фото: силуэт кузова в цвет машины на лёгкой подложке того же цвета.
   Фото (если есть) лежит поверх силуэта; не загрузилось — удаляется, остаётся силуэт. */
.veh-chip-sil { position: relative; background: color-mix(in srgb, var(--veh-color, #8a94a6) 22%, var(--wd-surface)); }
.veh-chip-sil img { position: absolute; inset: 0; z-index: 1; }
.veh-chip-svg { width: 86%; height: auto; fill: var(--veh-color, #8a94a6); filter: drop-shadow(0 0 .6px rgba(0,0,0,.55)); }
.emp-chip-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.emp-chip-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.emp-chip-name { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--wd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-chip-role { font-size: 11px; color: var(--wd-text-muted); line-height: 1.2; }
.emp-chip-sm { padding: 3px; border-radius: 18px; gap: 4px; }
.emp-chip-sm .emp-chip-avatar { width: 24px; height: 24px; font-size: 11px; }
.emp-chip-sm .emp-chip-name { font-size: 11px; }
.emp-chip-sm .emp-chip-role { display: none; }

/* ---------- Аватары: пикер и кроп ---------- */
.wd-avatar-picker { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.wd-avatar-img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; background: var(--wd-surface-2); border: 3px solid var(--wd-border); }
.wd-avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wd-primary); color: #fff; border: 2px solid var(--wd-surface); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.wd-avatar-del-btn { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--wd-danger); color: #fff; border: 2px solid var(--wd-surface); display: none; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; }
.wd-avatar-del-btn.visible { display: flex; }
.avatar-upload-wrap { position: relative; flex-shrink: 0; }
.avatar-upload-wrap .wd-avatar-del-btn { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--wd-danger); color: #fff; font-size: 14px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 3; }
.avatar-upload-wrap .wd-avatar-del-btn.visible { display: flex; }
.wd-crop-stage { height: min(62vh, 420px); overflow: hidden; display: flex; justify-content: center; background: #000; border-radius: 18px; margin: 0 16px; }
.wd-crop-image { max-width: 100%; max-height: 100%; display: block; }
/* Круглая рамка обрезки с контуром и затемнением вокруг — как будет выглядеть аватарка (как на id.aluhub.ru).
   Раньше правило висело на .wd-avatar-picker, а Cropper рисуется в окне — рамка была квадратной. */
.wd-crop-stage .cropper-view-box, .wd-crop-stage .cropper-face { border-radius: 50%; }
.wd-crop-stage .cropper-view-box { outline: 2px solid rgba(255,255,255,.9); outline-offset: -1px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); }
.wd-crop-stage .cropper-modal { background: transparent; }
.wd-crop-hint { font-size: 13px; color: var(--wd-text-muted); text-align: center; margin-top: 10px; }

/* ---------- Профиль Account (сотрудник / клиент / гость) ---------- */
.avatar-96 { width: 96px; height: 96px; position: relative; flex-shrink: 0; }
.avatar-img-96 { width: 96px; height: 96px; object-fit: cover; background: var(--wd-surface-2); border: 3px solid var(--wd-border); border-radius: 50%; }
.avatar-clickable { cursor: pointer; }
.avatar-upload-btn { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wd-primary); color: #fff; border: 2px solid var(--wd-surface); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.client-profile-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.client-profile-info { flex: 1; min-width: 0; }
.client-profile-name { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; font-weight: 700; }
.client-profile-login { margin-bottom: 6px; font-size: 14px; }
.client-badge-linked { background: #0f766e; color: #fff; font-weight: 600; }
.client-profile-welcome { text-align: center; padding: 14px 0; background: linear-gradient(135deg, rgba(var(--wd-primary-rgb),.08) 0%, rgba(var(--wd-primary-rgb),.03) 100%); border-radius: 12px; margin-bottom: 16px; }
.client-profile-welcome-sub { font-size: 13px; color: var(--wd-text-muted); margin-bottom: 4px; }
.client-profile-welcome-main { font-size: 15px; color: var(--wd-text); }
.client-profile-cta { padding: 14px; font-size: 16px; font-weight: 600; }
.client-profile-alt-link { text-align: center; margin-top: 14px; }
.client-profile-alt-link a { color: var(--wd-primary); font-size: 14px; text-decoration: none; }
.client-profile-reg-date { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--wd-border); font-size: 12px; }
.client-profile-stats-note { text-align: center; font-size: 12px; color: var(--wd-text-muted); margin: -8px 0 14px; }
/* Поля профиля «Email / Телефон» (Account) — стилей не было */
.profile-label { font-size: 12px; color: var(--wd-text-muted); margin-bottom: 2px; }
.profile-value { font-size: 15px; font-weight: 600; color: var(--wd-text); }
.profile-value-sm { font-size: 14px; }
.profile-value-break { word-break: break-all; }
.profile-meta-label { font-size: 13px; color: var(--wd-text-muted); }
.profile-meta-value { font-size: 16px; font-weight: 600; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--wd-surface-2); border: 3px solid var(--wd-border); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--wd-primary-dark); flex-shrink: 0; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Списки клиентов ---------- */
.client-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--wd-primary-light); color: var(--wd-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; position: relative; overflow: hidden; }
.client-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.client-card-avatar-ini { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* ---------- Заглушка аватара машины: силуэт кузова в пунктирном круге ---------- */
.wd-avatar-placeholder { position: absolute; inset: 0; border-radius: 50%; background: var(--wd-surface-2); border: 3px dashed var(--wd-border); display: flex; align-items: center; justify-content: center; color: var(--wd-text-muted); }
.wd-avatar-placeholder svg { width: 62%; height: auto; fill: currentColor; opacity: .7; }
/* Фото поверх заглушки: заглушка absolute и без z-index перекрывала <img>, фото машины на странице
   редактирования было не видно никогда. Кнопки ✎/🗑 — поверх фото. */
.wd-avatar-picker .wd-avatar-img { position: relative; z-index: 1; }
.wd-avatar-picker .wd-avatar-edit-btn, .wd-avatar-picker .wd-avatar-del-btn { z-index: 2; }
.wd-avatar-img-empty { opacity: 0; }

/* ---------- Машины: плитки и карточка-силуэт ---------- */
.vehicles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Много машин: видны первые 4, остальные — по кнопке «Показать все» (UI-14) */
.vehicles-grid.is-collapsed > :nth-child(n+5) { display: none; }
.vehicles-more { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed var(--wd-border); border-radius: 12px; background: transparent; color: var(--wd-primary-dark); font-size: 14px; font-weight: 600; cursor: pointer; }
.vehicles-more:hover { border-color: var(--wd-primary); }
body.dark .vehicles-more { color: var(--wd-primary); }
.vehicle-tile { border: none; background: transparent; padding: 0; display: block; color: inherit; text-decoration: none; }
/* «Добавить машину»: в сетке — на месте следующей машины; рядом с «Показать все» — пополам */
.vehicle-tile-add.is-cell { margin-top: 0; min-height: 0; height: 100%; }
.veh-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.veh-actions-row.is-single { grid-template-columns: 1fr; }
.veh-actions-row > * { margin-top: 0 !important; }
.page-under-title { display: flex; justify-content: center; margin: -8px 0 12px; }
.stat-inline-sub { font-size: 12px; font-weight: 600; color: var(--wd-success); white-space: nowrap; }
.vehicle-tile-add { margin-top: 10px; min-height: 44px; border: 1px dashed var(--wd-primary); border-radius: 12px; color: var(--wd-primary); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.veh-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.veh-tile { border: none; background: transparent; padding: 0; display: block; width: 100%; cursor: pointer; text-align: inherit; font: inherit; color: inherit; transition: transform .15s ease; }
.veh-tile:hover { transform: translateY(-1px); }
.veh-card-lg { position: relative; }
.veh-card-lg .wd-avatar-edit-btn { top: 6px; right: 6px; bottom: auto; }
.veh-card-lg .wd-avatar-del-btn { top: 6px; right: 40px; bottom: auto; }

/* Высота таблички задаётся здесь — все внутренние пропорции считаются от неё */
.veh-card2, .veh-card2-md { --plate-h: 20px; }
.veh-card2-sm { --plate-h: 22px; }
.veh-card2-lg { --plate-h: 34px; }

.veh-card2, .veh-card2-sm, .veh-card2-md, .veh-card2-lg { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 0 4px; width: 100%; }
.veh-card2-stage { position: relative; width: 100%; aspect-ratio: 120 / 50; color: var(--wd-text); --veh-alpha: 12%; }

/* Заливка цветом машины — нижний слой, по форме кузова (прозрачность общая с обводкой фото) */
.veh-card2-shape { position: absolute; inset: 0; background: var(--veh-color, #8a94a6); opacity: .12; mask-repeat: no-repeat; mask-size: 100% 100%; mask-position: center; transition: opacity .15s ease; }

/* Контур — цветом темы, поверх заливки */
.veh-card2-outline { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
/* Светлая тема: светлые цвета машин (белый, серебро) почти сливаются с фоном — заливка плотнее,
   контур темнее. Тёмная — контур еле заметен (как задумано). */
body:not(.dark) .veh-card2-stage { --veh-alpha: 26%; }
body:not(.dark) .veh-card2-shape { opacity: .26; }
body:not(.dark) .veh-card2-outline { opacity: .3; }
body.dark .veh-card2-outline { opacity: .05; }
.veh-card2-outline path { stroke: currentColor; }

/* Номер — отдельной строкой под силуэтом, ничего не перекрывает.
   Без фото: силуэт сверху по центру (пропорции 120:44 сохранены), номер под ним по центру. */
/* Заливка (div с маской) и контур (svg) — в ОДНОЙ рамке с пропорциями 120:44 и одинаковым
   вписыванием (contain / meet). Раньше у div ширина бралась из left/right, а svg считал её
   от высоты — заливка съезжала относительно контура. */
.veh-card2-shape { mask-size: contain; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.veh-card2-shape, .veh-card2-outline { inset: 0 auto auto 12.5%; width: 75%; height: 66%; }
.veh-card2-content { position: absolute; inset: auto 0 0 0; height: 34%; display: flex; align-items: center; justify-content: center; padding: 0; }

/* С фото: фото — круг во всю высоту слева; справа сверху силуэт, под ним номер (у левого края,
   рядом с фото). Обводка фото — цветом машины с той же прозрачностью, что заливка силуэта. */
.veh-card2-photo { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; z-index: 1; background: var(--wd-surface-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--veh-color, #8a94a6) var(--veh-alpha), transparent); }
.veh-card2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veh-card2.has-photo .veh-card2-shape,
.veh-card2.has-photo .veh-card2-outline { inset: 2% 0 auto auto; width: 54%; height: 49%; }
.veh-card2.has-photo .veh-card2-content { inset: auto 0 0 auto; width: 54%; height: 44%; justify-content: center; }
.veh-card2-row { display: flex; align-items: center; gap: 6px; }
.veh-card2-caption { font-size: 12px; font-weight: 700; color: var(--wd-text); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

.veh-card2-sm .veh-card2-caption { font-size: 11px; }
.veh-card2-lg .veh-card2-caption { font-size: 15px; }

.veh-tile.selected .veh-card2-stage { color: var(--wd-primary); }
.veh-tile:hover .veh-card2-stage,
.vehicle-tile:hover .veh-card2-stage { color: var(--wd-primary); }

/* ---------- Индикация выбора машины в Create: плотная цветная заливка силуэта ---------- */
.veh-tile.selected .veh-card2-shape { opacity: .6; }

/* ---------- Селекты размера/кузова с силуэтами ---------- */
.veh-select { position: relative; }
.veh-select-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 1.5px solid var(--wd-border); border-radius: 10px; background: var(--wd-bg); color: var(--wd-text); cursor: pointer; font-size: 14px; text-align: left; transition: border-color .15s; }
.veh-select-btn:hover { border-color: var(--wd-primary); }
.veh-select-icon { width: 34px; height: 14px; flex-shrink: 0; display: flex; color: var(--wd-text); }
.veh-select-icon svg { width: 100%; height: 100%; fill: currentColor; opacity: .85; }
.veh-select-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-select-chevron { color: var(--wd-text-muted); font-size: 12px; }
.veh-select-menu { position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; width: 100%; max-height: 240px; overflow-y: auto; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 6px; display: none; }
.veh-select.open .veh-select-menu { display: block; }
.veh-select-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--wd-text); }
.veh-select-item:hover { background: var(--wd-surface-2); }
.veh-select-item.selected { background: var(--wd-primary-light); }
.veh-select-item .veh-select-icon { width: 30px; height: 13px; }

/* ---------- Госномера: все пропорции от --plate-h (без отрицательных margin) ---------- */
.plate-ru {
    --h: var(--plate-h, 18px);
    --font: calc(var(--h) * .64);
    /* Регион + RUS + зазор = .42 + .24 + .05 = .71h при внутренней высоте .86h (h минус две рамки):
       сверху и снизу остаётся воздух. Было .58 + .38 + .03 = .99h — упирались в рамку и друг в друга. */
    --region-font: calc(var(--h) * .42);
    --rus-font: calc(var(--h) * .24);
    --border: max(1.2px, calc(var(--h) * .07));
    --radius: calc(var(--h) * .2);
    display: inline-flex;
    align-items: stretch;
    border: var(--border) solid #101418;
    border-radius: var(--radius);
    background: #fff;
    color: #101418;
    font-family: var(--wd-font-num); font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    vertical-align: middle;
    height: var(--h);
}
/* letter-spacing добавляет пробел и после последней буквы — справа вычитаем его из padding,
   иначе текст визуально съезжает влево. У региона вертикальный padding был фиксированный
   6px: на номере высотой 20px он распирал колонку, и «RUS» с цифрами уезжали вниз. */
.plate-main { display: flex; align-items: center; padding: 0 calc(var(--h) * .21 - var(--font) * .08) 0 calc(var(--h) * .21); font-size: var(--font); letter-spacing: calc(var(--font) * .08); white-space: nowrap; }
.plate-region { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: max(1px, calc(var(--h) * .05)); padding: 0 calc(var(--h) * .12); border-left: var(--border) solid #101418; min-width: calc(var(--h) * 1.1); font-size: var(--region-font); line-height: 1; }
.plate-rus { font-size: var(--rus-font); font-weight: 600; letter-spacing: .04em; line-height: 1; }
.plate-plain { display: flex; align-items: center; padding: 0 calc(var(--h) * .27); font-size: calc(var(--font) * .85); letter-spacing: calc(var(--font) * .08); }
.plate-empty { display: flex; align-items: center; padding: 0 calc(var(--h) * .27); color: #9aa3ad; border-color: #c3cad2; background: transparent; }
.plate-row { display: flex; gap: 10px; align-items: stretch; }
.plate-row .plate-input { flex: 1 1 50%; width: 50%; min-width: 0; }
.plate-row .plate-preview { flex: 1 1 50%; width: 50%; margin-top: 0; display: flex; align-items: center; min-height: 46px; --plate-h: 40px; }
.plate-input { font-family: var(--wd-font-num); font-variant-numeric: tabular-nums; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; font-size: 16px; background: #fff !important; color: #101418 !important; border: 2px solid #101418 !important; border-radius: 6px; }
.plate-input:focus { box-shadow: 0 0 0 3px rgba(var(--wd-primary-rgb),.25) !important; border-color: #101418 !important; }
.plate-input::placeholder { color: #9aa3ad; letter-spacing: 2px; font-weight: 600; }
.plate-preview { margin-top: 6px; min-height: 30px; }

/* ---------- Привязка клиента (QR) ---------- */
.client-link-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.client-link-badge.linked { background: rgba(16,185,129,.12); color: var(--wd-success); border: 1px solid transparent; }
.client-link-badge.invite { background: var(--wd-primary-light); color: var(--wd-primary-dark); border: 1px dashed var(--wd-primary); cursor: pointer; transition: background .15s ease, border-style .15s ease; }
.client-link-badge.invite:hover { background: var(--wd-primary); color: #fff; border-style: solid; }
/* Мини-значок рядом с заголовком страницы («Клиент 📱 В кабинете») */
/* 0.12 (B15): переключатель «Физ. лицо ⇄ Юр. лицо» в заголовке карточки клиента */
.page-title .cd-kind-form { display: inline; margin: 0; }
.page-title .cd-kind { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; margin-left: 4px; border-radius: 999px;
    border: 1px solid var(--wd-border); background: var(--wd-surface-2); color: var(--wd-text); font-size: 12px; font-weight: 600;
    vertical-align: middle; position: relative; top: -1px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.page-title .cd-kind:hover { border-color: var(--wd-primary); color: var(--wd-primary); }
.page-title .cd-kind.is-legal { background: var(--wd-primary-light); color: var(--wd-primary-dark); border-color: transparent; }
.page-title .cd-kind span { opacity: .6; font-weight: 400; }
.page-title .client-link-badge.is-mini { height: 18px; padding: 0 7px; margin-left: 4px; font-size: 10.5px; vertical-align: middle; position: relative; top: 1px; border: none; cursor: pointer; }
.client-invite-row { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin: 0 0 14px; border: 1px dashed var(--wd-primary); border-radius: 12px; background: var(--wd-primary-light); color: var(--wd-primary-dark); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.client-invite-row:hover { background: var(--wd-primary); color: #fff; border-style: solid; }
body.dark .client-invite-row { color: var(--wd-primary); }
body.dark .client-invite-row:hover { color: #fff; }
/* Плашки статистики: значение по центру, подпись слева снизу */
.stats-centered .stat-card:not(.stat-card-action) { display: flex; flex-direction: column; }
.stats-centered .stat-card:not(.stat-card-action) .stat-value { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; text-align: center; margin-bottom: 2px; }
.stats-centered .stat-label { text-align: left; }
.ci-qr-wrap { min-height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ci-qr-wrap img, .ci-qr-wrap canvas { display: block; margin: 0 auto; }
.ci-qr-placeholder { font-size: 34px; opacity: .5; }
.ci-qr-error { color: var(--wd-danger); font-size: 13px; padding: 20px 8px; }
.ci-qr-hint { font-size: 13px; color: var(--wd-text-muted); margin-bottom: 6px; }
.ci-link-row { font-size: 12px; margin-bottom: 8px; word-break: break-all; }
.ci-timer { font-size: 12px; color: var(--wd-text-muted); min-height: 16px; }

/* ---------- Карточка мойки в списках (_WashCard.cshtml) ----------
   Верх: фото/силуэт, номер + машина, услуги, сумма. Низ: клиент, дата · время · оплата,
   оценка, мойщики стопкой. Используется в «Мойках», на главной, в профиле клиента и в кабинете. */
.wash-list { display: flex; flex-direction: column; gap: 8px; }
.wash-card { display: block; padding: 12px 14px 10px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); color: var(--wd-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.wash-card:hover { border-color: var(--wd-primary); box-shadow: var(--wd-shadow); color: var(--wd-text); }
.wash-card:active { transform: scale(.995); }
.wash-card-top { display: flex; align-items: flex-start; gap: 12px; }
.wash-card-veh { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wash-card-veh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wash-card-mid { flex: 1; min-width: 0; }
.wash-card-car { display: flex; align-items: center; gap: 8px; min-width: 0; --plate-h: 20px; }
.wash-card-carname { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wash-card-svc { margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--wd-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wash-card-sum { flex-shrink: 0; text-align: right; }
.wash-card-amount { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wash-card-amount.is-free { color: var(--wd-success); font-size: 14px; }
.wash-card-gift { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--wd-success); white-space: nowrap; }
.wash-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--wd-border); font-size: 12px; color: var(--wd-text-muted); min-width: 0; }
.wash-card-client { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--wd-text); font-weight: 600; }
.wash-card-client-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wash-card-client + .wash-card-when::before { content: "·"; margin-right: 8px; }
.wash-card-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wash-card-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wash-card-rate { font-weight: 700; color: var(--wd-star); white-space: nowrap; }
.wash-card-rate.is-none { font-weight: 500; color: var(--wd-text-subtle); }
/* Мини-аватар: инициалы снизу, фото поверх (не загрузилось — удаляется, видны инициалы) */
.wash-card-ava { position: relative; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--wd-primary-light); color: var(--wd-primary-dark); font-size: 11px; font-weight: 700; }
.wash-card-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wash-card-team { display: inline-flex; }
.wash-card-team .wash-card-ava { box-shadow: 0 0 0 2px var(--wd-surface); }
.wash-card-team .wash-card-ava + .wash-card-ava { margin-left: -6px; }
.wash-card-more { background: var(--wd-surface-2); color: var(--wd-text-muted); }
.wash-month { margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); }
.wash-month:first-child { margin-top: 0; }

/* ---------- Чек мойки (Washes/Details и ClientPortal/Wash) ----------
   Как бумажный чек: шапка по центру, позиции с пунктиром до цены, крупный итог,
   зубчатый нижний край. Контур — drop-shadow, чтобы он обводил и зубцы. */
.receipt { position: relative; margin: 4px 0 26px; padding: 18px 16px 16px; background: var(--wd-surface); border-radius: 16px 16px 0 0; filter: drop-shadow(0 0 1px var(--wd-border-strong)) drop-shadow(0 6px 14px rgba(15,23,42,.06)); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(135deg, var(--wd-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x, linear-gradient(225deg, var(--wd-surface) 50%, transparent 50%) 0 0 / 14px 10px repeat-x; }
.receipt-head { text-align: center; }
.receipt-company { font-size: 16px; font-weight: 700; color: var(--wd-text); }
.receipt-no { margin-top: 2px; font-size: 13px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
.receipt-sep { margin: 14px 0; border-top: 1.5px dashed var(--wd-border); }
.receipt-car { display: flex; align-items: center; gap: 12px; min-width: 0; --plate-h: 22px; }
.receipt-car .wash-card-veh { width: 48px; height: 48px; }
.receipt-car-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.receipt-car-name { font-size: 14px; font-weight: 600; color: var(--wd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.receipt-row { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-size: 14px; color: var(--wd-text); }
.receipt-name { min-width: 0; }
.receipt-qty { margin-left: 4px; color: var(--wd-text-muted); font-size: 13px; white-space: nowrap; }
.receipt-dots { flex: 1; min-width: 16px; border-bottom: 1.5px dotted var(--wd-text-subtle); opacity: .6; transform: translateY(-4px); }
.receipt-price { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt-row.is-muted { color: var(--wd-text-muted); }
.receipt-row.is-discount { color: var(--wd-success); }
.receipt-row.is-free .receipt-price { text-decoration: line-through; opacity: .6; }
.receipt-gift { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(16,185,129,.14); color: var(--wd-success); vertical-align: 1px; }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 20px; font-weight: 800; color: var(--wd-text); font-variant-numeric: tabular-nums; }
.receipt-total-label { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.receipt-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--wd-text); }
.receipt-meta-label { color: var(--wd-text-muted); flex-shrink: 0; }
.receipt-meta-value { text-align: right; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.receipt-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.receipt-foot { margin-top: 12px; text-align: center; font-size: 12px; color: var(--wd-text-subtle); }

/* ---------- Клиентский портал (cp-*) ---------- */
/* Заголовки вкладок портала — как .page-title у сотрудников: 20px по центру */
.cp-header { margin-bottom: 16px; text-align: center; }
.cp-title { font-size: 20px; font-weight: 700; color: var(--wd-text); margin: 0 0 4px; }
.cp-subtitle { font-size: 13px; color: var(--wd-text-muted); margin: 0; }
.cp-loyalty { border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; color: #fff; background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); box-shadow: 0 8px 24px rgba(var(--wd-primary-rgb),.25); }
.cp-tier-gold { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); box-shadow: 0 8px 24px rgba(245,158,11,.25); }
.cp-tier-platinum { background: linear-gradient(135deg, #334155 0%, #64748b 100%); box-shadow: 0 8px 24px rgba(100,116,139,.3); }
.cp-loyalty-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cp-loyalty-name { font-size: 13px; opacity: .9; }
.cp-loyalty-tier { font-size: 18px; font-weight: 800; letter-spacing: .4px; }
.cp-loyalty-discount { font-size: 19px; font-weight: 800; background: rgba(255,255,255,.18); border-radius: 10px; padding: 2px 10px; }
.cp-loyalty-note { font-size: 13px; opacity: .9; margin-top: 10px; line-height: 1.4; }
.cp-loyalty-free { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.18); font-size: 13px; font-weight: 600; }
.cp-progress-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); margin-top: 10px; overflow: hidden; }
.cp-progress-fill { height: 100%; border-radius: 4px; background: #fff; transition: width .4s ease; }
/* Полоса до бесплатной на обычной карточке (чек, режим без сети), а не на цветной карте клиента (С-34) */
.cp-progress-track.is-on-surface { background: var(--wd-primary-light); }
.cp-progress-track.is-on-surface > .cp-progress-fill { background: var(--wd-primary); }
.cp-progress-label { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; opacity: .95; }
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cp-stat-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: 12px; padding: 12px 8px; text-align: center; }
.cp-stat-value { font-size: 16px; font-weight: 800; color: var(--wd-text); white-space: nowrap; }
.cp-stat-label { font-size: 11px; color: var(--wd-text-muted); margin-top: 2px; }
.cp-stat-save .cp-stat-value { color: var(--wd-success); }
/* 0.13 (C5): день рождения в кабинете клиента и в карточке клиента у сотрудника */
.cp-bday { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--wd-border);
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--wd-surface)), var(--wd-surface) 70%); }
.cp-bday.is-now { border-color: color-mix(in srgb, #f59e0b 55%, var(--wd-border)); }
.cp-bday-ico { font-size: 30px; line-height: 1; }
.cp-bday-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; font-size: 14px; }
.cp-bday-body span { color: var(--wd-text-muted); }
.cp-bday-form { display: flex; gap: 8px; margin-top: 4px; }
.cp-bday-form .form-control { max-width: 200px; }
.profile-birth { color: var(--wd-text-muted); font-size: 14px; margin: -4px 0 8px; }
.bd-card { margin-top: 12px; }
.bd-fields.is-off { opacity: .55; }
.bd-example { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 12%, var(--wd-surface-2));
    font-size: 14px; line-height: 1.45; }
/* 0.13 (C5): значок 🎂 у клиента — «В работе», «Записи», «Клиенты», чек */
.home-bday { margin-top: 4px; font-size: 14px; color: var(--wd-text); }
.home-bday a { color: var(--wd-primary); text-decoration: none; font-weight: 600; }
.bday-badge { display: inline-block; margin-left: 4px; font-size: .95em; line-height: 1; cursor: help; }
.cp-section-title { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); margin: 18px 0 8px; }
/* 0.12 (Н-60): «Цены» и «Рассчитать» на главной кабинета клиента */
.cp-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cp-quick-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--wd-border); border-radius: 18px;
    background: var(--wd-surface); color: var(--wd-text); text-decoration: none; min-width: 0; }
.cp-quick-item:hover { color: var(--wd-text); border-color: rgba(var(--wd-primary-rgb), .45); }
.cp-quick-item b { display: block; font-weight: 650; }
.cp-quick-item small { display: block; color: var(--wd-text-muted); font-size: 12px; line-height: 1.3; }
.cp-quick-ico { font-size: 22px; flex: 0 0 auto; }
/* «Ещё → Цены в кабинете клиента»: дерево сфера → группа → услуги */
.ps-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.ps-check .form-check-input { margin: 0; flex: 0 0 auto; }
.ps-group { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--wd-border); }
.ps-group-title { font-weight: 600; font-size: 14px; }
.ps-list { padding-left: 26px; }
.ps-sphere.is-off > :not(summary), .ps-group.is-off .ps-list { opacity: .45; }
/* 0.12 (Н-61): что надёжность меняет для клиента — под «🛡 Надёжность» в карточке */
.cd-rel-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-weight: 400; }
.cd-rel-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4;
    background: rgba(255, 149, 0, .12); color: #9a5800; }
.cd-rel-chip.is-good { background: rgba(52, 199, 89, .12); color: #1d7a37; }
body.dark .cd-rel-chip { color: #ffd28a; }
body.dark .cd-rel-chip.is-good { color: #a6f0b8; }
/* «Настройки записи → Надёжность клиента»: дни «горячего» времени */
.rel-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-days label { display: inline-flex; }
.rel-days input { position: absolute; opacity: 0; pointer-events: none; }
.rel-days span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); font-size: 13px; font-weight: 600; cursor: pointer; }
.rel-days input:checked + span { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.rel-days input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--wd-primary-rgb), .3); }
.cp-section-link {font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--wd-primary); text-decoration: none; }
.cp-veh-last { font-size: 11px; color: var(--wd-text-muted); margin-top: 2px; }
.cp-hint { margin-top: 14px; font-size: 13px; color: var(--wd-text-muted); text-align: center; }
.cp-wash-detail { padding: 14px; }
.cp-review-block { margin-top: 12px; }
.cp-review-block:first-child { margin-top: 0; }
.cp-review-cta { width: 100%; padding: 12px 16px; border: 1.5px dashed var(--wd-primary); border-radius: 12px; background: transparent; color: var(--wd-primary); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.cp-review-cta:active { background: rgba(var(--wd-primary-rgb),.08); }
.cp-review-hint { font-size: 12px; color: var(--wd-text-muted); margin-top: 6px; text-align: center; }
.cp-review-none, .cp-review-done { padding: 12px 16px; border-radius: 12px; font-size: 14px; background: var(--wd-surface-2); color: var(--wd-text-muted); border: 1px solid var(--wd-border); }
.cp-review-done { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--wd-text); }
.cp-review-stars { color: var(--wd-star); letter-spacing: 2px; font-size: 18px; line-height: 1; }
.cp-review-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--wd-overlay-bg); backdrop-filter: var(--wd-overlay-blur); -webkit-backdrop-filter: var(--wd-overlay-blur); }
.cp-review-card { width: 100%; max-width: 380px; border-radius: 16px; padding: 20px; background: var(--wd-surface); color: var(--wd-text); border: 1px solid var(--wd-border); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.cp-review-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; text-align: center; }
.cp-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.cp-star { border: none; background: none; cursor: pointer; padding: 2px; font-size: 34px; line-height: 1; color: rgba(128,128,128,.35); transition: transform .1s ease, color .1s ease; }
.cp-star.on { color: var(--wd-star); transform: scale(1.08); }
.cp-review-textarea { width: 100%; resize: vertical; min-height: 72px; border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(128,128,128,.35); background: transparent; color: inherit; font-size: 14px; }
.cp-review-textarea:focus { outline: none; border-color: var(--wd-primary); }
.cp-review-actions { display: flex; gap: 10px; margin-top: 14px; }
.cp-review-actions > button { flex: 1; }
.cp-review-error { margin-top: 10px; font-size: 13px; color: var(--wd-danger); text-align: center; }
.cp-btn { padding: 11px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease; }
.cp-btn-primary { background: var(--wd-primary); color: #fff; }
.cp-btn-primary:hover, .cp-btn-primary:focus { background: var(--wd-primary-dark); }
.cp-btn-primary:disabled { opacity: .45; cursor: default; }
.cp-btn-secondary { background: transparent; color: var(--wd-text-muted); border-color: var(--wd-border); }
.cp-btn-secondary:hover { background: var(--wd-surface-2); color: var(--wd-text); }

/* ---------- Нижнее меню клиента: аватарка в кнопке «Профиль» ---------- */
.bottomnav-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--wd-primary-light); color: var(--wd-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-bottom: 2px; }
.bottomnav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bottomnav-avatar span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bottomnav-label-login { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Отзывы ---------- */
.review-stars { color: var(--wd-star); letter-spacing: 1px; line-height: 1.2; }
.review-hist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.review-hist-label { font-size: 12px; width: 24px; text-align: right; color: var(--wd-text-muted); flex-shrink: 0; }
.review-hist-track { flex-grow: 1; height: 10px; border-radius: 5px; background: var(--wd-surface-2); overflow: hidden; }
.review-hist-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .3s ease; }
.review-hist-count { font-size: 12px; width: 30px; color: var(--wd-text-muted); flex-shrink: 0; }
.rev-summary { display: flex; gap: 18px; align-items: center; }
.rev-summary-left { text-align: center; min-width: 96px; }
.rev-avg { font-size: 40px; font-weight: 800; line-height: 1; color: var(--wd-text); }
.rev-avg-stars { font-size: 16px; margin: 4px 0 2px; }
.rev-count { font-size: 12px; color: var(--wd-text-muted); }
.rev-summary-right { flex: 1; min-width: 0; }
.rev-note { font-size: 12px; color: var(--wd-text-muted); margin: -4px 0 10px; }
/* Фильтр по сотруднику — лента чипов (прокрутка вбок на узком экране) */
.rev-filter { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
.rev-filter::-webkit-scrollbar { display: none; }
.rev-filter-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rev-filter-chip:first-child { padding-left: 14px; }
.rev-filter-chip.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.rev-filter-chip:hover { border-color: var(--wd-primary); color: inherit; }
.rev-filter-chip.is-active:hover { color: #fff; }
/* Карточка отзыва: автор и дата — оценка цветным значком — цитата — кто мыл и ссылка на чек */
.rev-list { display: flex; flex-direction: column; gap: 8px; }
.rev-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 12px 14px; }
.rev-head { display: flex; align-items: center; gap: 10px; }
.rev-author-ava.wash-card-ava { width: 36px; height: 36px; font-size: 13px; }
.rev-author { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rev-author-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-date { font-size: 12px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
.rev-score { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 14px; }
.rev-score .review-stars .wd-star { font-size: 13px; }
.rev-score b { font-weight: 800; }
.rev-score.is-good { background: rgba(16,185,129,.12); color: var(--wd-success); }
.rev-score.is-mid { background: rgba(245,158,11,.14); color: #b45309; }
.rev-score.is-bad { background: rgba(239,68,68,.12); color: var(--wd-danger); }
body.dark .rev-score.is-mid { color: #fbbf24; }
.rev-quote { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--wd-border-strong); border-radius: 0 10px 10px 0; background: var(--wd-surface-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--wd-text); }
.rev-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--wd-border); font-size: 12px; color: var(--wd-text-muted); min-width: 0; }
.rev-team-names { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-receipt-link { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--wd-primary-dark); text-decoration: none; }
body.dark .rev-receipt-link { color: var(--wd-primary); }.rate-one { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--wd-text); }
.rate-one.none { color: var(--wd-text-muted); font-weight: 500; font-size: 12px; }

/* ---------- Комментарии-карточки ---------- */
.wash-comment-card { background: var(--wd-surface-2); border-left: 4px solid var(--wd-primary); border-radius: 10px; padding: 10px 14px; margin-top: 8px; }
.wash-comment-card .comment-header { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wd-text-muted); margin-bottom: 4px; }
.wash-comment-card .comment-header .comment-icon { font-size: 14px; }
.wash-comment-card .comment-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--wd-text); }
.wash-comment-card .comment-text + .comment-text { margin-top: 4px; }
.client-notes { margin: 0 0 14px; border-left-color: #f59e0b; }
/* Комментарий в карточке мойки (списки) — одной строкой */
.wash-card-note { font-size: 12.5px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ---------- 0.11: подсказки ⓘ / 💬 (js/hint.js, Utils/Hint) ---------- */
/* Значок — тихий, не кнопка: без рамки и фона, чуть приглушён; нажатие — по всей области 24px */
.wd-hint {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    min-width: 20px; height: 20px; padding: 0 2px; margin: -2px 0 -2px 3px; border: 0; background: none;
    font-size: 13px; line-height: 1; color: var(--wd-text-muted); opacity: .75; cursor: pointer;
    border-radius: 999px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    position: relative; flex-shrink: 0;
}
.wd-hint::after { content: ''; position: absolute; inset: -4px; }   /* палец попадает легче, вид — тот же */
.wash-card-note > .wd-hint:first-child, .wj-svc > .wd-hint:first-child { margin-left: -2px; }
.wd-hint:hover, .wd-hint[aria-expanded="true"] { opacity: 1; color: var(--wd-primary); }
.wd-hint:focus-visible { outline: 2px solid rgba(var(--wd-primary-rgb), .6); outline-offset: 1px; }
/* Облачко: стекло — в общем списке слоёв glass.css */
.wd-hint-pop {
    position: fixed; z-index: var(--wd-z-popover, 5100); max-width: 320px; max-height: min(50vh, 360px); overflow: auto;
    padding: 9px 12px; border: 1px solid var(--wd-border); border-radius: 14px;
    background: var(--wd-surface-solid); color: var(--wd-text); font-size: 13.5px; line-height: 1.45;
    box-shadow: var(--wd-shadow-md); opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease;
    pointer-events: auto; text-align: left; font-weight: 400; letter-spacing: normal;
}
.wd-hint-pop.is-open { opacity: 1; transform: none; }
.wd-hint-pop[hidden] { display: none; }
.wd-hint-pop .wd-hint-title { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--wd-text-muted); margin-bottom: 3px; }
.wd-hint-pop .wd-hint-text { white-space: pre-line; overflow-wrap: anywhere; }
html.wd-lite .wd-hint-pop { transition: none; }
/* 0.12 (A7): «?» — пояснение из справки, «!» — предупреждение (Utils/Hint.Help / Hint.Warn). Кружок 16px, область нажатия —
   как у ⓘ (::after); в заголовках капсом (settings-group-title) — без капса и разрядки */
.wd-hint-help, .wd-hint-warn {
    min-width: 16px; width: 16px; height: 16px; padding: 0; margin-left: 5px; border-radius: 50%;
    font-size: 11px; font-weight: 700; line-height: 1; text-transform: none; letter-spacing: 0; opacity: .8;
    border: 1.5px solid currentColor;
}
.wd-hint-warn { color: var(--wd-warning); border-color: color-mix(in srgb, var(--wd-warning) 70%, transparent); }
.wd-hint-warn:hover, .wd-hint-warn[aria-expanded="true"] { color: var(--wd-warning); background: color-mix(in srgb, var(--wd-warning) 14%, transparent); }
.wd-hint-help:hover, .wd-hint-help[aria-expanded="true"] { background: var(--wd-primary-light); }
.wd-hint-pop.is-warn { border-left: 3px solid var(--wd-warning); }
.wd-hint-pop .wd-hint-more {
    display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
    background: var(--wd-primary-light); color: var(--wd-primary-dark); font-size: 13px; font-weight: 600; text-decoration: none;
}
.wd-hint-pop .wd-hint-more:hover, .wd-hint-pop .wd-hint-more:focus-visible { background: var(--wd-primary); color: #fff; outline: none; }
/* Особенности клиента в чеке — одной строкой; нажатие — весь текст в облачке */
.ck-notes {
    display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 12px; padding: 7px 12px;
    background: var(--wd-surface-2); border: 0; border-left: 4px solid #f59e0b; border-radius: 10px;
    font-size: 13.5px; color: var(--wd-text); text-align: left; cursor: pointer;
}
.ck-notes .ck-notes-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-notes .ck-notes-label { color: var(--wd-text-muted); flex-shrink: 0; }
.ck-notes[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }

/* Стили витрины /Public — в public.css */

/* ---------- Звёзды рейтинга ---------- */
.wd-star { font-size: 15px; line-height: 1; letter-spacing: 1px; }
.wd-star-full { color: var(--wd-star); }
.wd-star-empty { color: rgba(128,128,128,.45); }
.wd-star-part { position: relative; display: inline-block; color: rgba(128,128,128,.45); }
.wd-star-part::before { content: "★"; position: absolute; left: 0; top: 0; width: var(--fill, 50%); overflow: hidden; color: var(--wd-star); white-space: nowrap; }

/* ---------- Чипы-фильтры (общие): период в отчётах, период и мойщик в списке моек ---------- */
.chip-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
/* Если чипы не влезли — правый край растворяется: видно, что ряд листается вбок */
.chip-row.is-overflow { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.settings-row.is-selected { background: var(--wd-primary-light); }
.chip-row::-webkit-scrollbar { display: none; }
/* 0.12 (Н-75): каталог — сферы слева, «Показывать описание услуг клиентам» справа в той же строке */
.sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 10px; }
.sc-toolbar > .chip-row { flex: 0 1 auto; min-width: 0; padding-bottom: 2px; }
.sc-toolbar > .sc-desc-toggle { margin: 0 0 0 auto; font-size: 14px; color: var(--wd-text); }
.chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--wd-primary); color: var(--wd-text); }
.chip.is-active, .chip.is-active:hover { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.chip.has-ava { padding-left: 5px; }
.chip .wash-card-ava { width: 24px; height: 24px; }

/* ---------- Отчёты ---------- */
.rep-dates { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.rep-dates .form-control { flex: 1; min-width: 0; padding: 8px 10px; }
.rep-hero { margin-bottom: 12px; padding: 16px; border-radius: var(--wd-radius); color: #fff; background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); }
.rep-hero-label { font-size: 13px; opacity: .85; }
.rep-hero-value { font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rep-hero-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; opacity: .92; }
/* Аудит (BUG-13): проданные абонементы и «всего» под выручкой с чеков */
.rep-hero-subs { margin-top: 2px; font-size: 13px; opacity: .92; }
.rep-hero-facts b { font-variant-numeric: tabular-nums; }
.rep-card { padding: 14px; }
.rep-card-title { margin-bottom: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); }
.rep-card-title small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rep-empty { padding: 10px 0; font-size: 14px; color: var(--wd-text-muted); }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 4px 0; }
.chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.chart-bar { width: 100%; background: var(--wd-primary); opacity: .55; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-bar.is-max { opacity: 1; }
.chart-edge { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
/* Оплата: одна полоса по долям + легенда */
.pay-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--wd-surface-2); }
.pay-bar span { height: 100%; }
.is-cash { background: #10b981; }
.is-card { background: #3b82f6; }
.is-transfer { background: #a855f7; }
.is-other { background: #f59e0b; }
/* Отчёты: ручная правка цены (пункт 14) */
.rep-price-edits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rep-price-edit { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--wd-radius); border: 1px solid var(--wd-border); background: var(--wd-surface); }
.rep-price-edit span { font-size: 12px; color: var(--wd-text-muted); }
.rep-price-edit b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rep-price-edit small { font-size: 11px; color: var(--wd-text-muted); }
.rep-price-edit.is-loss b { color: var(--wd-danger); }
.rep-price-edit.is-gain b { color: var(--wd-success); }
.rep-sleep-chips { flex-wrap: wrap; overflow: visible; margin-bottom: 4px; }
.rep-sleep-chips .chip { height: 30px; padding: 0 12px; font-size: 12px; cursor: pointer; }
.pay-bar .is-other + .is-other { background: #fb923c; }
.pay-legend { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pay-legend > div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pay-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pay-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.pay-legend small { width: 36px; text-align: right; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
/* Переключатель-сегменты */
.seg { display: flex; padding: 3px; margin-bottom: 10px; border-radius: 12px; background: var(--wd-surface-2); }
.seg-btn { flex: 1; padding: 7px 4px; border: none; border-radius: 9px; background: transparent; color: var(--wd-text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg-btn.active { background: var(--wd-surface); color: var(--wd-text); box-shadow: var(--wd-shadow); }
.top-tabpane { display: none; }
.top-tabpane.active { display: block; }
.top-pane-title { display: none; }
/* 0.11: отчёты — кнопки в шапке (Excel, PDF, ⚙), настройка блоков, срез по сфере, таблицы сфер и счетов */
.rep-tools { display: flex; gap: 6px; }
.rep-tools .btn.active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.rep-setup { margin-bottom: 12px; }
.rep-setup-list { display: flex; flex-direction: column; }
.rep-setup-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; background: var(--wd-surface); }
.rep-setup-row + .rep-setup-row { border-top: 1px solid var(--wd-border); }
.rep-setup-handle { width: 22px; flex-shrink: 0; text-align: center; color: var(--wd-text-muted); cursor: grab; user-select: none; touch-action: none; }
.rep-setup-move { padding: 2px 8px; line-height: 1.2; }
.rep-setup-row.sortable-ghost { opacity: .4; }
.rep-setup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
/* 0.11: настройка главной (Settings/Home) — те же строки, что у блоков отчёта, с подсказкой и ограничением роли */
.home-setup { max-width: 760px; }
.home-setup-period { width: auto; min-width: 170px; flex-shrink: 0; }
.home-setup-text { display: flex; flex-direction: column; min-width: 0; }
.home-setup-text small { font-size: 12px; color: var(--wd-text-muted); line-height: 1.35; }
.home-setup-text .home-setup-limit { color: var(--wd-warning, #b45309); }
.home-setup-desk { margin-top: 8px; }
.rep-slice { margin-top: -4px; }
/* 0.11: фильтр отчёта применяется без перезагрузки — пока грузится, блоки приглушены */
.rep-blocks.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.rep-table-wrap { overflow-x: auto; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-table th { padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .03em; text-align: left; border-bottom: 1px solid var(--wd-border); white-space: nowrap; }
.rep-table td { padding: 7px 8px; border-bottom: 1px solid var(--wd-border); vertical-align: middle; }
.rep-table th:first-child, .rep-table td:first-child { padding-left: 0; }
.rep-table th:last-child, .rep-table td:last-child { padding-right: 0; }
.rep-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-table tfoot td { border-bottom: 0; border-top: 2px solid var(--wd-border); font-weight: 700; }
.rep-table td a { color: var(--wd-text); font-weight: 600; text-decoration: none; }
.rep-table td a:hover { color: var(--wd-primary); }
.rep-table tr.is-current td { background: var(--wd-primary-light); }
.rep-table td .rank-bar { display: block; margin-top: 4px; min-width: 40px; }
.rep-table .is-plus { color: var(--wd-success); }
.rep-table .is-minus { color: var(--wd-danger); }
.rep-kinds { margin-top: 10px; }
.rep-kinds > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--wd-primary); }
.rep-kinds-acc td { padding-top: 10px; font-weight: 700; }
.rep-kinds-kind { padding-left: 14px !important; color: var(--wd-text-muted); }
/* 0.12 (Н-10, Q5): на телефоне у кнопки Excel видна только стрелка — справа от неё буква «E» */
.xl-e { display: none; margin-left: 1px; font-weight: 800; font-size: .85em; }
@media (max-width: 480px) {
    .rep-tools { gap: 4px; }
    .rep-tools .btn { padding: 4px 8px; }
    .rep-tool-txt { display: none; }
    .xl-e { display: inline; }
    .rep-table { font-size: 13px; }
    .rep-table th, .rep-table td { padding-left: 5px; padding-right: 5px; }
}
/* Строка рейтинга: место — значок/аватар — имя и полоска доли — сумма */
.rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--wd-text); text-decoration: none; }
.rank-row + .rank-row { border-top: 1px solid var(--wd-border); }
a.rank-row:hover { color: var(--wd-text); }
.rank-no { width: 16px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--wd-text-subtle); }
.rank-ico { width: 28px; flex-shrink: 0; text-align: center; font-size: 16px; }
.rank-ava.wash-card-ava { width: 28px; height: 28px; font-size: 11px; }
.rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 0.12 (Н-19): на ПК имена в отчётах не обрезаются многоточием — длинное переносится */
@media (min-width: 992px) { .rank-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; } }
.rank-rate { margin-left: 4px; font-weight: 700; color: var(--wd-star); }
.rank-bar { height: 4px; border-radius: 2px; background: var(--wd-surface-2); overflow: hidden; }
.rank-bar span { display: block; height: 100%; border-radius: 2px; background: var(--wd-primary); }
.rank-num { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.rank-num b { font-size: 14px; font-variant-numeric: tabular-nums; }
.rank-num small { font-size: 12px; color: var(--wd-text-muted); }
/* Телефон: отчёты плотнее — меньше отступы, ниже график, чипы и цифры мельче */
@media (max-width: 480px) {
    .chip { height: 32px; padding: 0 12px; font-size: 12px; }
    .rep-hero { padding: 12px 14px; }
    .rep-hero-value { font-size: 26px; }
    .rep-hero-facts { font-size: 12px; gap: 2px 10px; }
    .rep-card { padding: 12px; margin-bottom: 10px; }
    .rep-card-title { font-size: 12px; margin-bottom: 8px; }
    .chart { height: 90px; }
    .pay-legend > div, .rank-name, .rank-num b { font-size: 13px; }
    .seg-btn { padding: 6px 2px; font-size: 12px; }
}
/* ---------- Силуэты мини ---------- */
.car-silhouette { width: 44px; height: 17px; fill: currentColor; opacity: .85; }

/* ---------- «Что нового» (/Changelog) ----------
   Лента версий: точка на линии, версия и дата, заголовок релиза; внутри — разделы
   и пункты с цветной меткой «новое / лучше / исправлено». Последняя версия раскрыта. */
.cl-legend { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--wd-text-muted); }
.cl-timeline { position: relative; padding-left: 16px; }
.cl-timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--wd-border); }
.cl-release { position: relative; margin-bottom: 8px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); }
.cl-release-head { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "ver stage . date" "title title title count"; align-items: center; gap: 0 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.cl-release-head::-webkit-details-marker { display: none; }
.cl-dot { position: absolute; left: -16px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--wd-surface); border: 2px solid var(--wd-border-strong); }
.cl-release.is-latest .cl-dot { background: var(--wd-primary); border-color: var(--wd-primary); box-shadow: 0 0 0 3px var(--wd-primary-light); }
.cl-version { grid-area: ver; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-stage { grid-area: stage; justify-self: start; padding: 0 7px; border-radius: 999px; background: var(--wd-surface-2); color: var(--wd-text-muted); font-size: 11px; font-weight: 600; }
.cl-date { grid-area: date; font-size: 12px; color: var(--wd-text-subtle); font-variant-numeric: tabular-nums; }
.cl-title { grid-area: title; font-size: 14px; font-weight: 600; color: var(--wd-text); }
.cl-count { grid-area: count; font-size: 11px; color: var(--wd-text-subtle); white-space: nowrap; }
.cl-release[open] .cl-count { display: none; }
.cl-body { padding: 0 12px 10px; border-top: 1px dashed var(--wd-border); }
.cl-section { margin-top: 10px; }
.cl-section-title { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-subtle); }
.cl-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.cl-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--wd-text); }
/* Значок типа пункта: ✦ новое, ↑ лучше, ✓ исправлено */
.cl-mark { flex-shrink: 0; width: 16px; text-align: center; font-size: 12px; font-weight: 800; }
.cl-mark.is-new { color: var(--wd-success); }
.cl-mark.is-better { color: var(--wd-primary-dark); }
.cl-mark.is-fix { color: var(--wd-text-subtle); }
body.dark .cl-mark.is-better { color: #67e8f9; }
/* 0.11: на телефоне список версий не нужен — лента и так одна колонка */
.cl-nav { display: none; }
@media (min-width: 992px) {
    /* Лог — на всю ширину экрана (как на телефоне), а не в узкой колонке страниц-форм */
    main.main-content:has(.cl-page) { max-width: none; }
    .cl-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
    .cl-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--wd-topbar-h) + 12px);
        max-height: calc(100vh - var(--wd-topbar-h) - 36px); overflow-y: auto; padding-right: 4px; }
    .cl-nav-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 10px;
        color: var(--wd-text); text-decoration: none; border: 1px solid transparent; }
    .cl-nav-item:hover { background: var(--wd-surface-2); }
    .cl-nav-item.is-active { background: var(--wd-surface); border-color: var(--wd-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    .cl-nav-item b { font-size: 14px; font-variant-numeric: tabular-nums; }
    .cl-nav-item .cl-stage { justify-self: start; }
    .cl-nav-item small { grid-column: 1 / -1; font-size: 12px; color: var(--wd-text-muted); line-height: 1.3; }
    .cl-nav-date { grid-column: 1 / -1; font-size: 11px; color: var(--wd-text-subtle); font-variant-numeric: tabular-nums; }
    .cl-release { scroll-margin-top: calc(var(--wd-topbar-h) + 12px); }
    .cl-release-head { padding: 12px 16px; }
    .cl-title { font-size: 15px; }
    /* Разделы версии — одной колонкой: так читается легче (С-23); раздел не рвётся между колонками */
    .cl-body { padding: 4px 16px 14px; column-gap: 32px; }
    .cl-section { break-inside: avoid; margin-top: 12px; }
    .cl-item { font-size: 13.5px; }
}
/* Только на очень широком экране — две широкие колонки, не больше */
@media (min-width: 1600px) {
    .cl-body { columns: 2; }
}
/* ---------- Bootstrap-компоненты в цветах приложения (обе темы) ---------- */
.card { --bs-card-bg: var(--wd-surface); --bs-card-border-color: var(--wd-border); --bs-card-color: var(--wd-text); }
.list-group { --bs-list-group-bg: var(--wd-surface); --bs-list-group-color: var(--wd-text); --bs-list-group-border-color: var(--wd-border); --bs-list-group-action-hover-bg: var(--wd-surface-2); --bs-list-group-action-hover-color: var(--wd-text); }
.modal { --bs-modal-bg: var(--wd-surface); --bs-modal-color: var(--wd-text); --bs-modal-border-color: var(--wd-border); --bs-modal-header-border-color: var(--wd-border); --bs-modal-footer-border-color: var(--wd-border); }

/* ---------- Тёмная тема: только то, что не решается токенами ---------- */
body.dark .cp-loyalty { box-shadow: none; }
body.dark .plate-ru { box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ---------- Анимации и медиа ---------- */
@keyframes wdpop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@media (max-width: 400px) {
    .emp-actions-inline { flex-wrap: wrap; justify-content: flex-end; }
}

/* ================= Работа без сети (0.8) ================= */
/* Полоска состояния сети в обычном приложении (offline-core.js) */
.net-bar { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; background: var(--wd-primary); color: #fff; }
.net-bar.is-offline { background: #b45309; }
.net-bar[data-tone="bad"] { background: #b91c1c; }
.net-bar a { color: #fff; text-decoration: underline; white-space: nowrap; }
.net-bar-warn { font-weight: 500; opacity: .9; white-space: nowrap; }

/* Офлайн-приложение (/Offline) */
.off-app { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.off-top { position: sticky; top: 0; z-index: 50; background: var(--wd-surface); border-bottom: 1px solid var(--wd-border); padding: 10px 16px 8px; }
.off-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-top-app { font-size: 17px; font-weight: 800; color: var(--wd-text); display: flex; align-items: center; gap: 8px; }
.off-top-company { font-size: 12px; color: var(--wd-text-muted); }
.off-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(245,158,11,.18); color: #b45309; }
.off-badge.is-online { background: rgba(16,185,129,.15); color: var(--wd-success); }
.off-badge[data-tone="bad"] { background: rgba(239,68,68,.15); color: var(--wd-danger); }
.off-badge[data-tone="muted"] { background: var(--wd-surface-2); color: var(--wd-text-muted); }
body.dark .off-badge { color: #fbbf24; }
body.dark .off-badge.is-online { color: var(--wd-success); }
body.dark .off-badge[data-tone="bad"] { color: #f87171; }
body.dark .off-badge[data-tone="muted"] { color: var(--wd-text-muted); }
/* Связь с сервером вернулась — предложение вернуться в обычное приложение */
.off-back { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: rgba(16,185,129,.14); color: var(--wd-text); }
.off-back[hidden] { display: none; }
.off-status { font-size: 12px; color: var(--wd-text-muted); margin-top: 4px; }
.off-main, .off-guide { max-width: 640px; margin: 0 auto; padding: 14px 16px; }
.off-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--wd-surface); border-top: 1px solid var(--wd-border); padding-bottom: env(safe-area-inset-bottom); }
.off-nav button { flex: 1; border: none; background: none; padding: 8px 4px 10px; font-size: 11px; font-weight: 600; color: var(--wd-text-muted); display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.off-nav button span { font-size: 20px; line-height: 1; }
.off-nav button.is-active { color: var(--wd-primary); }
.off-nav button b { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--wd-danger); color: #fff; font-size: 11px; line-height: 18px; padding: 0 5px; }
.off-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.off-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: var(--wd-radius); border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font-size: 13px; font-weight: 600; }
.off-quick-btn span { font-size: 26px; line-height: 1; }
/* Карточка клиента без сети — кнопка с разметкой обычного списка (.client-card) */
.client-card.off-client { width: 100%; text-align: left; font: inherit; color: inherit; }
.off-wash-veh { display: flex; align-items: center; gap: 12px; }
.off-wash-veh .settings-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.off-veh { width: 100%; border: none; background: none; text-align: left; gap: 10px; }
.off-veh .settings-text { display: flex; flex-direction: column; gap: 4px; }
.off-op-msg { display: block; margin-top: 4px; color: var(--wd-text); white-space: normal; }
/* Окно-«лист» снизу с формой */
.off-sheet { position: fixed; inset: 0; z-index: 2000; background: var(--wd-overlay-bg); -webkit-backdrop-filter: var(--wd-overlay-blur); backdrop-filter: var(--wd-overlay-blur); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.off-sheet.is-open { opacity: 1; }
.off-sheet-box { width: 100%; max-width: 520px; background: var(--wd-surface); border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(30px); transition: transform .2s ease; }
.off-sheet.is-open .off-sheet-box { transform: none; }
.off-sheet-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; color: var(--wd-text); }
.off-sheet-actions { display: flex; gap: 8px; margin-top: 14px; }
.off-sheet-actions .btn { flex: 1; }

/* Передача данных между телефонами по QR (offline-qr.js) */
.off-quick { grid-template-columns: 1fr 1fr; }
.off-qr-box { text-align: center; }
.off-qr-code { width: 284px; height: 284px; margin: 0 auto 8px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.off-qr-code img, .off-qr-code canvas { width: 260px !important; height: 260px !important; display: block; }
.off-qr-frame { font-size: 12.5px; color: var(--wd-text-muted); min-height: 18px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.off-qr-what { font-size: 15px; color: var(--wd-text); margin-bottom: 6px; line-height: 1.45; }
.off-qr-code-check { font-size: 14px; color: var(--wd-text-muted); margin: 6px 0 10px; }
.off-qr-code-check b { font-size: 26px; letter-spacing: 6px; color: var(--wd-text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.off-qr-ok { width: 64px; height: 64px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--wd-success); }
.off-scan { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto 10px; border-radius: 20px; overflow: hidden; background: #000; }
.off-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.off-scan-frame { position: absolute; inset: 14%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }

/* Состояние телефона (Ещё → Работа без сети) */
.offline-status { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 14px; margin-bottom: 16px; }
.offline-status-main { display: flex; align-items: center; gap: 12px; }
.offline-status-ico { font-size: 28px; line-height: 1; }
.offline-status-text b { display: block; font-size: 15px; color: var(--wd-text); }
.offline-status-text small { display: block; font-size: 12px; color: var(--wd-text-muted); margin-top: 2px; }

/* Инструкция «Работа без сети» (_OfflineGuide) */
.og-hero { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--wd-radius); background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); color: #fff; margin-bottom: 16px; }
.og-hero-ico { font-size: 30px; line-height: 1; }
.og-hero b { font-size: 15px; }
.og-hero p { margin: 4px 0 0; font-size: 13px; opacity: .92; line-height: 1.45; }
.og-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wd-text-muted); margin: 18px 0 8px; }
.og-steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--wd-text); line-height: 1.5; }
.og-steps li { margin-bottom: 8px; }
.og-zone { border-radius: var(--wd-radius); padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--wd-border); border-left-width: 5px; background: var(--wd-surface); }
.og-zone.is-green { border-left-color: var(--wd-success); }
.og-zone.is-yellow { border-left-color: var(--wd-warning); }
.og-zone.is-red { border-left-color: var(--wd-danger); }
.og-zone.is-gray { border-left-color: var(--wd-text-muted); }
.og-zone-head { font-size: 15px; font-weight: 700; color: var(--wd-text); margin-bottom: 6px; }
.og-zone ul, .og-tips { margin: 0; padding-left: 18px; font-size: 13px; color: var(--wd-text); line-height: 1.5; }
.og-zone li, .og-tips li { margin-bottom: 4px; }

/* Режим без сети: прокрутка к полю/кнопке не прячет её под нижнее меню */
html:has(body.off-app) { scroll-padding-bottom: 96px; scroll-padding-top: 90px; }
body.off-app .off-main { padding-bottom: 110px; }
/* Режим без сети: машины (фото или силуэт), аватарка клиента, номер не растягивается */
.off-veh .settings-text { align-items: flex-start; }
.off-veh .plate-ru { align-self: flex-start; }
.off-veh-vis { position: relative; flex-shrink: 0; width: 64px; height: 40px; display: flex; align-items: center; justify-content: flex-end; }
.off-veh-sil { width: 54px; height: 20px; opacity: .55; }
.off-veh-photo { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--wd-surface-2); box-shadow: 0 0 0 2px var(--wd-border); z-index: 1; }
.off-veh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.off-avatar { position: relative; display: flex; align-items: center; justify-content: center; }
.off-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Приглашение в мойку (профиль, PRIV-02) */
.invite-card { border-radius: var(--wd-radius); padding: 14px; margin-bottom: 12px; border: 1px solid var(--wd-primary); background: color-mix(in srgb, var(--wd-primary) 8%, var(--wd-surface)); }
.invite-card-title { font-size: 15px; font-weight: 700; color: var(--wd-text); margin-bottom: 4px; }
.invite-card-text { font-size: 14px; color: var(--wd-text); line-height: 1.45; }
.invite-card-meta { font-size: 12px; color: var(--wd-text-muted); margin-top: 4px; }
/* Цвет машины — выпадающий список с поиском (_ColorPicker) */
.color-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.18); }
.color-dot.is-empty { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--wd-border) 3px 5px); }
body.dark .color-dot { border-color: rgba(255,255,255,.25); }
.color-select .veh-select-menu { max-height: 300px; }
.color-search { position: sticky; top: -6px; z-index: 1; margin-bottom: 6px; }
.color-empty { font-size: 13px; color: var(--wd-text-muted); padding: 8px 10px; }
.veh-select-item[hidden] { display: none !important; }
.invite-obstacle { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.12); font-size: 13px; color: var(--wd-text); }
.invite-obstacle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; }
/* Подсказки о возможностях (tips.js) */
.wd-tips { margin-bottom: 12px; transition: opacity .2s ease, transform .2s ease; }
.wd-tips.is-leaving { opacity: 0; transform: translateY(-6px); }
.wd-tip { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--wd-radius); border: 1px solid color-mix(in srgb, var(--wd-primary) 45%, var(--wd-border)); background: color-mix(in srgb, var(--wd-primary) 8%, var(--wd-surface)); }
.wd-tip-ico { font-size: 24px; line-height: 1; }
.wd-tip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--wd-text-muted); }
.wd-tip-body b { font-size: 14px; color: var(--wd-text); }
.wd-tip-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.wd-tip-actions .btn-link { color: var(--wd-text-muted); text-decoration: none; }

/* ---------- Кнопки фото — везде одинаково: изменить слева снизу, удалить справа снизу ---------- */
.wd-avatar-edit-btn, .avatar-upload-btn { left: -2px; right: auto; bottom: -2px; top: auto; z-index: 3; }
.wd-avatar-del-btn, .avatar-upload-wrap .wd-avatar-del-btn { right: -2px; left: auto; bottom: -2px; top: auto; width: 28px; height: 28px; font-size: 12px; z-index: 3; }
.settings-logo .wd-avatar-del-btn, .acc-avatar .wd-avatar-del-btn { width: 24px; height: 24px; font-size: 11px; }
/* Прямоугольное фото машины — кнопки внутри углов */
.veh-card-lg .wd-avatar-edit-btn { left: 8px; right: auto; bottom: 8px; top: auto; }
.veh-card-lg .wd-avatar-del-btn { right: 8px; left: auto; bottom: 8px; top: auto; }
.topbar-title { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topbar-title:active { opacity: .7; }

.book-meta .seen-yes { color: var(--wd-success); }
.book-meta .seen-no { color: var(--wd-warning); }
/* Выключатели владельца (Settings/Features, пункт 8): кнопка-тумблер, отправляет форму */
.feature-switch.is-locked { opacity: .6; }
.wd-switch-btn { position: relative; width: 46px; height: 26px; flex-shrink: 0; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
    background: var(--wd-border); transition: background .15s; }
.wd-switch-btn span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.wd-switch-btn.is-on { background: var(--wd-success); }
.wd-switch-btn.is-on span { transform: translateX(20px); }
.wash-seen-note { margin: -4px 0 14px; font-size: 13px; color: var(--wd-success); text-align: center; }
.cp-loyalty-points { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; font-size: 14px; }
.cp-loyalty-points b { font-size: 22px; }
.cp-loyalty-points small { font-size: 12px; opacity: .85; }
/* Программы лояльности (Settings/Loyalty, пункт 13): карточки-варианты с плюсами и минусами */
.loy-programs { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
@media (min-width: 992px) { .loy-programs { grid-template-columns: 1fr 1fr; } }
.loy-program { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--wd-radius);
    border: 1.5px solid var(--wd-border); background: var(--wd-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.loy-program input { position: absolute; top: 14px; right: 14px; }
.loy-program.is-active { border-color: var(--wd-primary); background: color-mix(in srgb, var(--wd-primary) 7%, var(--wd-surface)); }
.loy-program.is-soon { opacity: .55; cursor: default; }
.loy-program-head { display: flex; align-items: center; gap: 8px; padding-right: 26px; font-size: 15px; color: var(--wd-text); }
.loy-program-ico { font-size: 20px; }
.loy-program-sum { font-size: 13px; color: var(--wd-text); line-height: 1.45; }
.loy-program-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; color: var(--wd-text-muted); line-height: 1.4; }
.loy-program-cols > span { display: flex; flex-direction: column; gap: 3px; }
.loy-program-cols i { font-style: normal; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--wd-text); }
.loy-program-best { margin-top: auto; font-size: 12px; color: var(--wd-text-muted); }

/* Две карточки формы рядом (Washes/Create: комментарий и время мойки); на узком — друг под другом */
@media (min-width: 576px) {
    .wd-form-pair.has-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
    .wd-form-pair.has-two > .wd-form-card { margin-bottom: 16px; }
}

/* Оплата мойки: один способ чипами или частями (js/pay-split.js, пункт 11) */
.pay-split-chips { flex-wrap: wrap; overflow: visible; padding-bottom: 4px; }
.pay-split-toggle { border: 0; background: none; padding: 6px 0; color: var(--wd-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.pay-split-rows { display: flex; flex-direction: column; gap: 8px; }
.pay-split-row { display: flex; align-items: center; gap: 8px; }
.pay-split-row .wd-select, .pay-split-row > select { flex: 1 1 55%; min-width: 0; }
.pay-split-amount { flex: 1 1 45%; min-width: 0; text-align: right; font-weight: 600; }
.pay-split-rest { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; padding: 4px 12px;
    font-weight: 700; color: var(--wd-text); line-height: 1.2; }
.pay-split-rest small { font-size: 11px; font-weight: 500; color: var(--wd-text-muted); }
.pay-split-rest.is-bad { color: var(--wd-danger); }
.pay-split-del { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--wd-border); background: var(--wd-surface);
    color: var(--wd-text-muted); font-size: 12px; cursor: pointer; }
.pay-split-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.pay-split-error { margin-top: 6px; font-size: 13px; color: var(--wd-danger); }
.pay-split-free { font-size: 14px; color: var(--wd-text-muted); }
.receipt-pay-part { display: block; }
.receipt-fiscal-note { margin: 4px 0 8px; font-size: 11px; color: var(--wd-text-muted); text-align: right; }

/* Просмотр фото крупно (js/photo-viewer.js) */
.wd-avatar-img:not(.wd-avatar-img-empty), .profile-avatar img, .acc-avatar img, .veh-card2-photo img, [data-zoom] { cursor: zoom-in; }
.wd-viewer { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, .88); opacity: 0; transition: opacity .2s ease; cursor: zoom-out; }
.wd-viewer.is-open { opacity: 1; }
.wd-viewer img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    transform: scale(.94); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.wd-viewer.is-open img { transform: none; }
.wd-viewer-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; cursor: pointer; }
/* Каталог: ночной тариф — строка состояния, форма раскрывается по «Настроить» */
.night-card { padding: 10px 12px 10px 16px; }
.night-card[hidden] { display: none; }
.night-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.night-status { font-size: 14px; color: var(--wd-text-muted); min-width: 0; }
.night-status b { color: var(--wd-text); font-weight: 600; white-space: nowrap; }
.night-row .btn { flex-shrink: 0; }
.night-form { margin-top: 12px; padding-bottom: 4px; }
.night-form[hidden] { display: none; }

/* ---------- Ревью 15.10: корзина (Settings/Trash) — карточки сеткой, у каждой «когда · кем»; нажатие — запись целиком ---------- */
.trash-grid { display: flex; flex-direction: column; gap: 8px; }
.trash-card { display: flex; flex-direction: column; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius);
    box-shadow: var(--wd-edge), var(--wd-shadow); overflow: hidden; transition: border-color .15s; }
.trash-card:hover { border-color: var(--wd-primary); }
.trash-card-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 8px; border: 0; background: transparent;
    color: var(--wd-text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.trash-card-main:hover { color: var(--wd-text); }
.trash-ico { position: relative; width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 12px; background: var(--wd-surface-2); font-size: 20px; }
.trash-ico.is-ava { border-radius: 50%; background: var(--wd-primary-light); color: var(--wd-primary-dark); font-size: 14px; font-weight: 700; }
.trash-ico.is-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trash-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trash-card-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-card-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wd-text-muted); }
.trash-card-text b { font-size: 15px; }
.trash-card-text small { font-size: 12.5px; color: var(--wd-text-muted); }
.trash-card-when { color: var(--wd-danger) !important; opacity: .85; }
.trash-card-chev { color: var(--wd-text-muted); font-size: 20px; }
.trash-card-act { display: flex; gap: 6px; justify-content: flex-end; padding: 0 14px 10px; margin-top: auto; }
/* Окошко записи */
.trash-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.trash-pop-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.trash-pop-head small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wd-text-muted); }
.trash-pop-head b { font-size: 17px; }
.trash-pop-deleted { margin-bottom: 12px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: rgba(255, 59, 48, .10); color: var(--wd-danger); }
.trash-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; }
.trash-facts dt { font-weight: 500; color: var(--wd-text-muted); }
.trash-facts dd { margin: 0; overflow-wrap: anywhere; }
.trash-long { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--wd-surface-2); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
#trashModalFoot .trash-card-act { padding: 0; }
@media (min-width: 992px) {
    main.main-content:has(.trash-page) { max-width: none; }
    .trash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: stretch; }
}

/* Удалённое, открытое из корзины (чек, клиент): заметная плашка; остальные кнопки страницы не работают — только смотреть */
.trash-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px;
    border: 1px solid rgba(255, 59, 48, .35); background: rgba(255, 59, 48, .10); color: var(--wd-text); }
.trash-banner-ico { font-size: 24px; }
.trash-banner-text { flex: 1 1 260px; display: flex; flex-direction: column; min-width: 0; }
.trash-banner-text b { color: var(--wd-danger); font-size: 16px; }
.trash-banner-text small { font-size: 13px; color: var(--wd-text-muted); }
.trash-banner-act { display: flex; gap: 6px; flex-wrap: wrap; }
.is-trash-view form:not(.trash-banner form), .is-trash-view button:not(.trash-banner button):not(.page-header > button),
.is-trash-view .btn:not(.trash-banner .btn):not(.page-header > .btn), .is-trash-view input:not([type=hidden]), .is-trash-view select,
.is-trash-view details > summary { pointer-events: none; }
.is-trash-view .btn:not(.trash-banner .btn):not(.page-header > .btn) { opacity: .45; }