/* Hallmark · shape: app screen · genre: modern-minimal · theme: Rim (deal 2/3, seed premium-admin-car-detailing-3eea·6b80d82d·2026-10-27·r0) · redesign: full
 * nav: top bar, five destinations, bottom bar under 48rem · signature: the day by post, each car one ruled row with its close action · states: full, empty (no cars, closed day), error (flash)
 * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E, mono set only on measures the markup marks (td.num, .time, KPI values, numeric inputs) — sums inside prose stay in the body face */
/* Отступления от темы Rim: время без пояса (студия в одном городе, время местное); Onest вместо Switzer (у Switzer нет кириллицы). */
@import url("./tokens.css?v=4");
@import url("./base.css");

/* ---------- Типографика ---------- */
body { font-size: 1.0625rem; color: var(--color-ink-2); }
h1 { font-size: var(--text-display); color: var(--color-ink); max-width: none; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: var(--text-section); color: var(--color-ink); margin: var(--space-xl) 0 var(--space-sm); letter-spacing: -0.02em; max-width: none; }
h3 { font-size: var(--text-title); color: var(--color-ink); margin: 0 0 var(--space-xs); letter-spacing: -0.01em; }
a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); }
a:hover { text-decoration-color: var(--color-accent); }
code, .m, td.num, th.num, .time, .kpi .value, .price-grid input,
input[inputmode="numeric"], input[inputmode="decimal"], input[type="number"], input[type="date"], input[type="time"] {
  font-family: var(--font-outlier); font-variant-numeric: tabular-nums;
}
code { font-size: var(--text-sm); background: var(--color-paper-3); padding: 1px var(--space-2xs); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.warn-text { color: var(--color-warn); } .ok-text { color: var(--color-success); } .bad-text { color: var(--color-error); }

/* ---------- Каркас: верхняя полоса, пять разделов ---------- */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; gap: var(--space-lg);
  height: 64px; padding-inline: var(--space-lg); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top .studio { margin-right: auto; color: var(--color-ink); font-weight: 500; font-size: var(--text-md); letter-spacing: -0.01em; }
.top form { margin: 0; }
.nav { display: flex; height: 100%; }
.nav a { display: inline-flex; align-items: center; gap: var(--space-xs); height: 100%; padding-inline: var(--space-lg);
  color: var(--color-muted); text-decoration: none; font-size: var(--text-md); font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.nav a:hover { color: var(--color-ink); }
.nav a.on { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.nav svg { width: 18px; height: 18px; }
main { max-width: 1200px; margin-inline: auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.head p { margin-top: var(--space-2xs); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.crumb { margin: 0 0 var(--space-xs); font-size: var(--text-sm); }
.crumb a { color: var(--color-muted); text-decoration: none; }
.crumb a:hover { color: var(--color-ink); }
.chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pills a:has(.chev) { display: inline-flex; align-items: center; }
.flash { margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule); box-shadow: inset 2px 0 0 var(--color-accent); color: var(--color-ink); }

/* ---------- Поверхности: колодцы на линиях, без теней и скруглений ---------- */
.card { background: var(--color-paper-2); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) var(--space-lg); }
.grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.grid > .card { border: 0; border-right: var(--rule-hair) solid var(--color-rule-2); background: none; }
.cols { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.kpi .label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.kpi .value { color: var(--color-ink); font-size: var(--text-2xl); letter-spacing: -0.03em; margin-top: var(--space-2xs); white-space: nowrap; }
.kpi .hint { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.delta { font-family: var(--font-outlier); font-size: var(--text-xs); margin-left: var(--space-xs); letter-spacing: 0; vertical-align: middle; }
.delta.up { color: var(--color-success); } .delta.down { color: var(--color-error); }
.progress { height: 4px; background: var(--color-rule); }
.progress span { display: block; height: 100%; background: var(--color-accent); }

/* ---------- Переключатели ---------- */
.pills { display: inline-flex; flex-wrap: wrap; border: var(--rule-hair) solid var(--color-rule); width: fit-content; max-width: 100%; }
.pills a { padding: var(--space-xs) var(--space-md); color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
  border-right: var(--rule-hair) solid var(--color-rule); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.pills a:last-child { border-right: 0; }
.pills a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.pills a.on { color: var(--color-ink); background: var(--color-paper-3); box-shadow: inset 0 -2px 0 var(--color-accent); }
.subnav { margin: 0 0 var(--space-lg); }

/* ---------- Таблицы: только горизонтальные линии ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-sm) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: middle; }
thead th { border-bottom-color: var(--color-rule); }
tbody tr:last-child > * { border-bottom: 0; }
th { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
td { color: var(--color-ink-2); }
td.num, th.num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.card.table-wrap { padding: var(--space-2xs) var(--space-sm); }
tr.muted td { color: var(--color-muted-2); }

/* ---------- Графики ---------- */
.bars { display: flex; align-items: end; gap: var(--space-3xs); height: 140px; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bars span { flex: 1; min-width: 3px; background: var(--color-ink-2); }
.bars span.zero { background: var(--color-rule); height: 1px !important; }
.heat td { padding: var(--space-3xs); border: 0; } .heat th { padding: var(--space-2xs); text-align: center; }
.heat .cell { width: 100%; height: 20px; background: var(--color-accent-2); }

/* ---------- День по постам: подпись экрана ---------- */
.post { padding: 0; }
.post > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-weight: 500; }
.booking { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
.booking:last-child { border-bottom: 0; }
.booking a { text-decoration: none; }
.booking .time { color: var(--color-ink); font-size: var(--text-lg); letter-spacing: -0.02em; margin-right: var(--space-xs); }
.booking .actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin-top: var(--space-xs); }
.window { margin: var(--space-sm) var(--space-md); padding: var(--space-xs) var(--space-sm); color: var(--color-accent-2); font-size: var(--text-sm);
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-accent-2) 40%, transparent); background: color-mix(in oklab, var(--color-accent-2) 7%, transparent); }
.badge { display: inline-block; padding: 1px var(--space-xs); font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
  border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.badge.new { color: var(--color-accent-2); border-color: color-mix(in oklab, var(--color-accent-2) 50%, transparent); }
.badge.confirmed { color: var(--color-ink-2); }
.badge.done { color: var(--color-success); border-color: color-mix(in oklab, var(--color-success) 45%, transparent); }
.badge.no_show { color: var(--color-error); border-color: color-mix(in oklab, var(--color-error) 45%, transparent); }
.badge.cancelled { color: var(--color-muted-2); }

/* ---------- Шкала дня ---------- */
.day-figures { margin-bottom: var(--space-lg); }
.timeline { margin-bottom: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-sm) var(--space-md) var(--space-md); }
.tl-axis, .tl-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.tl-axis { height: 24px; }
.tl-row { min-height: 48px; border-top: var(--rule-hair) solid var(--color-rule-2); }
.tl-name { color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-lane { position: relative; height: 100%; min-height: 24px; }
.tl-row .tl-lane { height: 48px; }
.tl-hour { position: absolute; top: 4px; transform: translateX(-50%); font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }
.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-rule-2); }
.tl-window { position: absolute; top: 20px; height: 8px; background: color-mix(in oklab, var(--color-accent-2) 45%, transparent); }
.tl-event { position: absolute; top: 6px; bottom: 6px; min-width: 6px; overflow: hidden; display: flex; align-items: center; gap: var(--space-2xs);
  padding: 0 var(--space-xs); font-size: var(--text-xs); white-space: nowrap; text-decoration: none; color: var(--color-ink);
  background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); box-shadow: inset 2px 0 0 var(--color-ink-2);
  transition: background-color var(--dur-short) var(--ease-out); }
.tl-event:hover { background: var(--color-paper); }
.tl-event.new { box-shadow: inset 2px 0 0 var(--color-accent-2); }
.tl-event.confirmed { box-shadow: inset 2px 0 0 var(--color-accent); }
.tl-event.done { color: var(--color-muted); box-shadow: inset 2px 0 0 var(--color-success); }
.tl-event span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tl-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-accent); }
.tl-legend { margin-top: var(--space-sm); }
@media (max-width: 48rem) {
  .tl-axis, .tl-row { grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-xs); }
  .tl-event span { display: none; }
  .tl-event { padding: 0; }
  .tl-hour:nth-child(even) { display: none; }
}

/* ---------- Формы и кнопки ---------- */
form.inline { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-xs); }
label { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-md); font-weight: 500; }
input, select, textarea { min-height: 48px; min-width: 0; max-width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: 0;
  background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-muted-2);
  transition: border-color var(--dur-short) var(--ease-out); }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
input::placeholder, textarea::placeholder { color: var(--color-muted-2); }
input[type="checkbox"] { min-height: auto; width: 18px; height: 18px; accent-color: var(--color-accent); }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; }
textarea { width: 100%; min-height: 88px; }
.form-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: end; }
.check { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--color-ink-2); font-size: var(--text-md); font-weight: 400; }
fieldset.checks { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; }
details > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--color-ink); font-weight: 500; }
details > summary:hover { color: var(--color-accent); }
details.more { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }

button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md);
  border-radius: 0; border: var(--rule-hair) solid var(--color-rule); background: none; color: var(--color-ink);
  font-size: var(--text-md); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
button:hover, .btn:hover { border-color: var(--color-muted); background: var(--color-paper-2); }
button:active, .btn:active { background: var(--color-paper-3); }
.btn-metal, a.btn-metal, button.btn-metal { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-metal:hover, a.btn-metal:hover, button.btn-metal:hover { background: var(--color-focus); border-color: var(--color-focus); }
button.ghost { border-color: transparent; color: var(--color-muted); }
button.ghost:hover { color: var(--color-ink); background: var(--color-paper-2); border-color: transparent; }
button.small, .btn.small { min-height: 40px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
p > .btn + .btn { margin-left: var(--space-xs); }

.login { max-width: 400px; margin: 14vh auto; }
.svc-row { display: grid; gap: var(--space-sm); grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); align-items: end; }
.price-grid { table-layout: fixed; min-width: 300px; }
.price-grid input { width: 100%; padding: var(--space-xs); }
.price-grid th, .price-grid td { padding: var(--space-2xs); }
.price-grid th:first-child { width: 56px; }
/* Нормы времени: название услуги длинное, поля минут узкие */
.norm-grid { max-width: 640px; }
.norm-grid th:first-child { width: auto; }
.norm-grid th:not(:first-child) { width: 110px; }
.norm-grid td:first-child .muted { display: block; }
@media (max-width: 480px) { .norm-grid th:not(:first-child) { width: 76px; } }
.level { padding: 0 var(--space-2xs); font-size: var(--text-xs); white-space: nowrap; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); }
.level.l2 { color: var(--color-success); } .level.none { color: var(--color-warn); }
.pay-row { display: grid; gap: var(--space-xs); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hours-row { grid-template-columns: 70px 140px minmax(0, 1fr) minmax(0, 1fr); }
.steps { display: grid; gap: var(--space-sm); counter-reset: step; }
.steps > .card { position: relative; padding-left: var(--space-2xl); }
.steps > .card::before { counter-increment: step; content: counter(step); position: absolute; left: var(--space-lg); top: var(--space-md);
  font-family: var(--font-outlier); font-size: var(--text-xl); color: var(--color-accent); }

/* ---------- Плитки «Настроек» ---------- */
.tiles { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-hair) solid var(--color-rule); }
.tile { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md) var(--space-lg); min-height: 104px; text-decoration: none;
  color: var(--color-ink); background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out); }
.tile:hover { background: var(--color-paper-3); }
.tile strong { font-weight: 500; font-size: var(--text-md); }
.tile span { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Предпросмотр Telegram ---------- */
.tg-preview { max-width: 360px; overflow: hidden; background: var(--color-paper-3); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); line-height: 1.45; }
.tg-preview img { display: block; width: 100%; height: auto; }
.tg-text { padding: var(--space-sm); overflow-wrap: anywhere; }
.tg-button { margin: 0 var(--space-xs) var(--space-xs); padding: var(--space-xs); text-align: center; font-weight: 500; color: var(--color-accent); border: var(--rule-hair) solid var(--color-rule); }

/* ---------- Телефон: нижняя полоса из пяти разделов ---------- */
@media (max-width: 48rem) {
  .top { height: 56px; padding-inline: var(--space-md); }
  .nav { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky-nav); height: auto; justify-content: space-around;
    background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); padding: 0 0 env(safe-area-inset-bottom); }
  .nav a { flex: 1; flex-direction: column; justify-content: center; gap: var(--space-3xs); height: 68px; padding: 0 var(--space-3xs); font-size: var(--text-sm);
    box-shadow: inset 0 2px 0 transparent; min-width: 0; }
  .nav a.on { box-shadow: inset 0 2px 0 var(--color-accent); }
  .nav svg { width: 26px; height: 26px; }
  main { padding: var(--space-lg) var(--space-md) calc(var(--space-3xl) + env(safe-area-inset-bottom)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid > .card { padding: var(--space-sm) var(--space-md); border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .grid > .card:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-rule-2); }
  .kpi .value { font-size: var(--text-xl); }
  .svc-row, .pay-row, .hours-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-sm { display: none; }
  .steps > .card { padding-left: var(--space-lg); padding-top: 56px; }
  input, select, textarea { font-size: var(--text-md); }
}
@media print {
  .top, .nav, .no-print, .flash, .subnav { display: none !important; }
  main { padding: 0; }
}

/* ---------- Простые экраны: один вопрос и одна большая кнопка ---------- */
.simple { max-width: 560px; }
.date { color: var(--color-muted); font-size: 1.0625rem; }
.big { color: var(--color-ink); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: var(--space-2xs) 0; }
.big .m, .val, .car time, .car .price, .money-val { font-family: var(--font-outlier); font-weight: 400; font-variant-numeric: tabular-nums; }
.sub { color: var(--color-ink-2); font-size: 1.125rem; }
.btn-big { display: flex; width: 100%; min-height: 60px; margin-top: var(--space-md); padding: var(--space-xs) var(--space-md);
  font-size: 1.1875rem; font-weight: 600; line-height: 1.25; text-align: center; }
.btn-line { display: flex; width: 100%; min-height: 60px; margin-top: var(--space-sm); padding: var(--space-xs) var(--space-md);
  font-size: 1.1875rem; font-weight: 600; line-height: 1.25; text-align: center; border-width: 2px; }
.section-title { margin-top: var(--space-xl); color: var(--color-muted); font-size: 1.0625rem; }
.car { margin-top: var(--space-md); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.car-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.car time { color: var(--color-ink); font-size: 1.625rem; }
.car .price { color: var(--color-ink); font-size: 1.25rem; }
.car .what { color: var(--color-ink); font-size: 1.1875rem; font-weight: 500; margin-top: var(--space-2xs); }
.car .who { color: var(--color-muted); font-size: 1.0625rem; }
.car .who a { color: var(--color-muted); }
.car.done { background: none; }
.car.done time, .car.done .what { color: var(--color-muted); }
.car .row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.paid { margin-top: var(--space-xs); color: var(--color-success); font-size: 1.0625rem; font-weight: 500; }
.small-link { display: block; text-align: center; margin-top: var(--space-md); color: var(--color-muted); font-size: 1.0625rem; }
.day-nav { display: flex; gap: var(--space-xs); align-items: center; margin-top: var(--space-sm); }
.day-nav a { color: var(--color-muted); font-size: 1rem; }
.choices { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.choice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 60px; padding: var(--space-xs) var(--space-md);
  border: 2px solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); font-size: 1.1875rem; text-decoration: none; text-align: left; width: 100%; font-weight: 400; }
.choice:hover { border-color: var(--color-muted); background: var(--color-paper-2); }
.choice.on { border-color: var(--color-accent); }
.choice .m { font-family: var(--font-outlier); color: var(--color-muted); font-size: 1.0625rem; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip { min-height: 52px; min-width: 76px; padding: 0 var(--space-md); display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-rule); color: var(--color-ink); text-decoration: none; font-family: var(--font-outlier); font-size: 1.0625rem; }
.chip.on { border-color: var(--color-accent); }
.chip.word { font-family: var(--font-body); }
.step { color: var(--color-muted); font-size: 1.0625rem; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: var(--space-md); border: var(--rule-hair) solid var(--color-rule); }
.seg a, .seg button { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-xs); color: var(--color-muted);
  text-decoration: none; font-size: 1rem; border: 0; border-right: var(--rule-hair) solid var(--color-rule); background: none; }
.seg > :last-child { border-right: 0; }
.seg .on, .seg [aria-selected="true"] { color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 -3px 0 var(--color-accent); }
.money-row { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.money-row .label { color: var(--color-ink-2); font-size: 1.125rem; }
.money-val { color: var(--color-ink); font-size: 2rem; margin-top: var(--space-3xs); }
.money-row.result .money-val { color: var(--color-accent); }
.note { margin-top: var(--space-md); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: 1.0625rem; }
.note.warn { box-shadow: inset 3px 0 0 var(--color-warn); }
.menu a { display: flex; align-items: center; gap: var(--space-md); min-height: 72px; padding: var(--space-xs) var(--space-2xs);
  color: var(--color-ink); text-decoration: none; font-size: 1.1875rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
.menu a:hover { background: var(--color-paper-2); }
.menu a span { display: grid; }
.menu a small { color: var(--color-muted); font-size: 0.9375rem; }
.menu svg { width: 26px; height: 26px; flex: none; color: var(--color-accent); }
.fact { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: 1.125rem; color: var(--color-ink-2); }
.fact b { display: block; color: var(--color-ink); font-weight: 600; font-size: 1.3125rem; margin-bottom: var(--space-3xs); }
.fact b .m { font-family: var(--font-outlier); font-weight: 400; }
.fact .down { color: var(--color-error); } .fact .up { color: var(--color-success); }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-sm); font-size: 1.0625rem; color: var(--color-ink); }
.line .m { font-family: var(--font-outlier); color: var(--color-ink-2); }
/* Напоминание направления: название и текст на всю ширину, сроки рядом. */
.remind-card > strong, .remind-card > .wide { grid-column: 1 / -1; }
.remind-card textarea { width: 100%; resize: vertical; }
.bar { grid-column: 1 / -1; height: 8px; background: var(--color-rule); }
.bar i { display: block; height: 100%; background: var(--color-accent); }
.svc-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); min-height: 60px; padding: var(--space-xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); text-decoration: none; font-size: 1.125rem; }
.svc-line:hover { background: var(--color-paper-2); }
.svc-line .m { font-family: var(--font-outlier); color: var(--color-ink-2); font-size: 1.0625rem; white-space: nowrap; }
.svc-line.off { color: var(--color-muted); }
.group { margin-top: var(--space-lg); color: var(--color-muted); font-size: 1rem; }
.cost { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm); padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: 1.125rem; color: var(--color-ink-2); }
.cost .m { font-family: var(--font-outlier); color: var(--color-ink); white-space: nowrap; }
.cost small { grid-column: 1 / -1; color: var(--color-muted); font-size: 0.9375rem; }
.keep { margin-top: var(--space-md); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.keep .label { color: var(--color-ink-2); font-size: 1.0625rem; }
.keep .val { color: var(--color-accent); font-size: 2.125rem; margin-top: var(--space-3xs); }
.keep .val.bad { color: var(--color-error); }
.keep .hint { color: var(--color-muted); font-size: 1rem; margin-top: var(--space-2xs); }
.supplier { margin-top: var(--space-lg); }
.supplier .name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); color: var(--color-ink); font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.supplier .name .m { font-family: var(--font-outlier); font-weight: 400; font-size: 1rem; color: var(--color-warn); }
.stock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm); padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: 1.125rem; color: var(--color-ink); }
.stock-row .m { font-family: var(--font-outlier); }
.stock-row small { color: var(--color-muted); font-size: 0.9375rem; }
.stock-row.low small { color: var(--color-warn); }
.qty { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-xs); }
.radius { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding: var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.radius b { font-family: var(--font-outlier); font-weight: 400; font-size: 1.1875rem; color: var(--color-ink); }
.tabpanel[hidden] { display: none; }

/* Контроль дня: «Нужно отметить», «Закрыть день». Предупреждение — тёплый жёлтый, не акцент. */
.tails { margin-top: var(--space-md); border: 2px solid var(--color-warn); background: var(--color-paper-2); }
.tails h2 { margin: 0; padding: var(--space-sm) var(--space-md); font-size: 1.25rem; font-weight: 600; color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule); }
.tails h2 .m { font-family: var(--font-outlier); font-weight: 400; color: var(--color-warn); }
.tail-item { padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.tail-item:last-child { border-bottom: 0; }
.tail-item .q { color: var(--color-ink); font-size: 1.1875rem; font-weight: 500; }
.tail-item .late { color: var(--color-warn); font-size: 1rem; margin-top: var(--space-3xs); }
.tail-item > .btn { width: 100%; margin-top: var(--space-sm); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-sm); }
.pair > * { min-height: 52px; margin: 0; width: 100%; font-size: 1.0625rem; }
.pair .btn-line { min-height: 52px; }
button.linklike { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-muted); text-decoration: underline;
  text-underline-offset: 3px; }
button.linklike:hover { background: none; color: var(--color-ink); }
.day-close { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.checkrow { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-sm); padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); }
.checkrow .mark { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--color-rule); font-weight: 600; }
.checkrow.ok .mark { border-color: var(--color-success); color: var(--color-success); }
.checkrow.no .mark { border-color: var(--color-warn); color: var(--color-warn); }
.checkrow b { display: block; color: var(--color-ink); font-size: 1.1875rem; font-weight: 600; }
.checkrow .small { color: var(--color-muted); }
.checkrow .tail-item { padding: var(--space-sm) 0; }
.checkrow input[name="counted"] { font-family: var(--font-outlier); font-size: 1.375rem; min-height: 56px; width: 100%; }
.btn-big[aria-disabled="true"], button.btn-big:disabled { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.chip:has(input) { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--color-accent); color: var(--color-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); color: var(--color-ink-2); }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.order-row b { display: block; color: var(--color-ink); font-weight: 500; }
.order-row small { color: var(--color-muted); }
.order-row small.warn-text { color: var(--color-warn); }
.stepper { display: inline-grid; grid-template-columns: 44px 72px 44px; flex: none; }
.stepper button { min-height: 44px; padding: 0; font-size: 1.25rem; }
.stepper input { min-height: 44px; padding: 0 4px; text-align: center; font-family: var(--font-outlier); border-inline: 0; }

/* =====================================================================================================
   Новый дизайн (макет mockups/redesign.html): карточки, скругления, меню слева на компьютере, снизу на телефоне.
   ===================================================================================================== */
body { font-variant-numeric: tabular-nums; font-size: 1rem; }
code { border-radius: 6px; }
.m, td.num, th.num, .kpi .value, .big .m, .val, .money-val, .car time, .car .price, .time { font-weight: 600; letter-spacing: -0.01em; }
a { text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }

/* Каркас */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); gap: 32px; max-width: calc(var(--page-max) + var(--nav-w) + 80px); margin-inline: auto; padding: 20px var(--space-lg); align-items: start; }
.shell.bare { display: block; }
/* Меню слева — просто колонка на фоне страницы, без карточки вокруг */
.side { position: sticky; top: 20px; display: grid; gap: var(--space-sm); padding: 0; }
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px; color: var(--color-ink); font-weight: 700; text-decoration: none; min-width: 0; }
.logo i { width: 28px; height: 28px; flex: none; border-radius: 8px; background: linear-gradient(135deg, #c94c15, #f58a3c); }
.nav { display: grid; gap: 2px; height: auto; }
.nav a { display: flex; height: auto; min-height: 44px; padding: 8px 12px; gap: 10px; align-items: center; border-radius: var(--radius-ctl); color: var(--color-ink-2); font-size: 0.9375rem; box-shadow: none; }
.nav a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav a.on { background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-card); }
.nav a.on svg { color: var(--color-accent); }
.nav .count { margin-left: auto; padding: 0 8px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; background: var(--color-warn-bg); color: var(--color-warn); }
.mob-only, .nav a.mob-only { display: none; }
.side-foot { display: flex; gap: var(--space-2xs); align-items: center; padding: var(--space-sm) 4px 0; border-top: 1px solid var(--color-rule); }
.side-foot button { background: none; color: var(--color-muted); }
.side-foot button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.side-foot form { margin: 0; }
main { max-width: var(--page-max); margin: 0; padding: 0 0 var(--space-xl); min-width: 0; }
.shell.bare main { max-width: 1100px; margin-inline: auto; }

/* Поверхности */
.card, .car, .keep, .note, .flash, .timeline, .tails, .tg-preview { border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper-2); }
.card { padding: var(--pad-card); }
.flash { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-ctl); background: var(--color-good-bg); color: var(--color-ink); box-shadow: none; }
.flash.flash-bad { background: var(--color-bad-bg); }
.note { box-shadow: none; background: var(--color-paper-3); border-radius: var(--radius-ctl); }
.note.warn { background: var(--color-warn-bg); color: var(--color-ink); box-shadow: none; }
.grid { gap: var(--space-md); border: 0; background: none; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.grid > .card { border: 0; background: var(--color-paper-2); padding: var(--pad-card); }
.head { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; align-items: flex-end; }
h1 { font-weight: 600; font-size: 1.75rem; letter-spacing: -0.025em; }
h2 { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
section:not(.card) > table, .cols > section > table, main > table { background: var(--color-paper-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
th, td { border-bottom-color: var(--color-rule-2); }
.table-wrap { background: var(--color-paper-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* Переключатели */
.pills, .seg { display: inline-flex; grid-auto-flow: unset; gap: 2px; padding: 3px; border: 0; border-radius: var(--radius-ctl); background: var(--color-paper-3); }
.pills a, .seg a, .seg button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 9px; color: var(--color-muted); font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; background: none; }
.pills a:hover, .seg a:hover { background: none; color: var(--color-ink); }
.pills a.on, .seg .on, .seg [aria-selected="true"] { background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.seg { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }

/* Кнопки и поля */
button, .btn { border-radius: var(--radius-ctl); border: 0; background: var(--color-paper-3); font-weight: 500; }
button:hover, .btn:hover { background: var(--color-rule); }
.btn-metal, a.btn-metal, button.btn-metal { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.btn-metal:hover, a.btn-metal:hover, button.btn-metal:hover { background: var(--color-accent-hover); border-color: transparent; }
button.ghost { background: none; }
.btn-big, .btn-line { min-height: 52px; font-size: 1rem; border-radius: 14px; border: 0; justify-content: center; align-items: center; }
.btn-line { background: var(--color-paper-3); color: var(--color-ink); font-weight: 500; }
.btn-big[aria-disabled="true"], button.btn-big:disabled { background: var(--color-paper-3); color: var(--color-muted); opacity: 1; }
button.linklike { background: none; }
input, select, textarea { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-ctl); background: var(--color-paper-3); }
input:hover, select:hover, textarea:hover { border-color: var(--color-rule); }
label { font-size: 0.875rem; color: var(--color-ink-2); }
.form-grid { gap: var(--space-sm); }
.chip { min-height: 40px; min-width: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: 0.875rem; font-weight: 500; }
.chip:hover { background: var(--color-rule); }
.chip.on, .chip:has(input:checked) { background: var(--color-accent); color: var(--color-accent-ink); border: 0; }
.choice { border: 0; border-radius: 14px; background: var(--color-paper-2); box-shadow: var(--shadow-card); font-size: 1rem; font-weight: 500; }
.choice:hover { background: var(--color-paper-2); outline: 2px solid var(--color-accent); }
.choices { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
details.card > summary { font-weight: 600; }
details > summary:hover { color: var(--color-accent); }

/* Плюс и минус */
.stepper { display: inline-grid; grid-template-columns: 40px minmax(48px, 1fr) 40px; align-items: center; width: 100%; max-width: 190px; border-radius: var(--radius-ctl); background: var(--color-paper-3); }
.stepper button { min-height: 44px; width: 40px; padding: 0; background: none; font-size: 1.25rem; font-weight: 500; border-radius: var(--radius-ctl); }
.stepper button:hover { background: var(--color-rule); }
.stepper input { width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; text-align: center; font-weight: 600; }
.add { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: var(--radius-ctl); background: var(--color-accent); color: var(--color-accent-ink); font-size: 1.375rem; line-height: 1; text-decoration: none; }
.add:hover { background: var(--color-accent-hover); }

/* Метки */
.tag, .badge { display: inline-block; padding: 2px 10px; border: 0; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; background: var(--color-paper-3); color: var(--color-ink-2); }
.tag.g, .badge.done { background: var(--color-good-bg); color: var(--color-success); }
.tag.w { background: var(--color-warn-bg); color: var(--color-warn); }
.tag.r, .badge.no_show { background: var(--color-bad-bg); color: var(--color-error); }
.tag.b, .badge.new { background: var(--color-blue-bg); color: var(--color-accent-2); }
.level { border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); padding: 1px 8px; }

/* Сводка */
.dash { display: grid; gap: var(--space-md); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash > * { grid-column: span 4; min-width: 0; margin: 0; }
.dash > .c3 { grid-column: span 3; } .dash > .c8 { grid-column: span 8; } .dash > .c12 { grid-column: span 12; }
.dash .card { padding: var(--pad-card); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-2xs); }
.card-head h2 { margin: 0; }
.stat .lab { color: var(--color-muted); font-size: 0.875rem; }
.stat .num { color: var(--color-ink); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; white-space: nowrap; }
.stat.hero { background: linear-gradient(135deg, #b0410f, #c94c15); }
.stat.hero .lab, .stat.hero .num { color: #fff; } .stat.hero .tag { background: rgb(255 255 255 / .2); color: #fff; }
.chart { display: block; width: 100%; height: 190px; margin-top: var(--space-sm); }
.lrow { display: flex; align-items: center; gap: var(--space-sm); padding: 10px 0; border-top: 1px solid var(--color-rule-2); color: var(--color-ink); text-decoration: none; }
.lrow:first-of-type { border-top: 0; }
.lrow .t { flex: 1; min-width: 0; } .lrow b { display: block; font-weight: 500; overflow-wrap: anywhere; } .lrow small { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.lrow .v { flex: none; font-weight: 600; white-space: nowrap; }
.ava { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--color-blue-bg); color: var(--color-accent-2); font-weight: 600; }
.meter { height: 6px; margin-top: 5px; overflow: hidden; border-radius: 9px; background: var(--color-paper-3); }
.meter i { display: block; height: 100%; border-radius: 9px; background: var(--color-success); }
.meter.w i { background: var(--color-warn); } .meter.r i { background: var(--color-error); }
.progress, .bar { border-radius: 9px; overflow: hidden; background: var(--color-paper-3); }
.bars span { background: var(--color-accent); border-radius: 3px 3px 0 0; opacity: .85; }
.bars { border-bottom: 0; }

/* Широкие экраны: то, что на телефоне идёт столбиком, на компьютере в несколько колонок */
.simple { max-width: none; }
.narrow { max-width: 600px; }
.cards { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); align-items: start; margin-top: var(--space-md); }
.cards > * { margin-top: 0; min-width: 0; }
.split { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; margin-top: var(--space-md); }
.split > * { min-width: 0; margin-top: 0; }
.sticky { position: sticky; top: var(--space-md); }
.big { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; }
.sub, .date { font-size: 1rem; }
.section-title { margin-top: var(--space-lg); font-weight: 600; color: var(--color-ink); font-size: 1.125rem; }
.car { padding: var(--space-md) 20px; }
.car time { font-size: 1.375rem; } .car .price { font-size: 1.0625rem; }
.car .what { font-size: 1rem; } .car .who { font-size: 0.875rem; }
.car.done { background: var(--color-paper-2); }
.car .btn-big { min-height: 48px; margin-top: var(--space-sm); }
.tails { padding: 0; overflow: hidden; border: 0; box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-warn); }
.tails h2 { padding: var(--space-md) 20px var(--space-xs); border: 0; font-size: 1.125rem; }
.tails h2 .m { font-weight: 700; }
.tail-item { padding: var(--space-sm) 20px var(--space-md); border-bottom: 0; border-top: 1px solid var(--color-rule-2); }
.tail-item .q { font-size: 1rem; }
.tail-item .late { font-size: 0.875rem; }
.pair > * { min-height: 44px; font-size: 0.9375rem; }
.pair .btn-line { min-height: 44px; }
.money-row { padding: var(--space-md) 20px; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.money-row.result { background: linear-gradient(135deg, #b0410f, #c94c15); }
.money-row.result .label, .money-row.result .money-val, .money-row.result .bad-text { color: #fff; }
.money-val { font-size: 1.75rem; font-weight: 700; }
.money-row .label { font-size: 0.875rem; color: var(--color-muted); }
.menu { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-top: var(--space-md); }
.menu a { min-height: 76px; padding: var(--space-sm) var(--space-md); border: 0; border-radius: 16px; background: var(--color-paper-2); box-shadow: var(--shadow-card); font-size: 1rem; font-weight: 500; }
.menu a:hover { background: var(--color-paper-2); outline: 2px solid var(--color-accent); }
.menu svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--color-paper-3); }
.menu a small { font-size: 0.8125rem; font-weight: 400; }
.fact { padding: var(--space-md) 20px; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); font-size: 0.9375rem; }
.fact b { font-size: 1.0625rem; }
.supplier { margin-top: 0; padding: var(--space-md) 20px; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.supplier .name { font-size: 1.0625rem; }
.supplier .name .m { color: var(--color-warn); font-size: 0.875rem; font-weight: 600; }
.stock-row, .svc-line, .cost, .order-row { font-size: 0.9375rem; text-decoration: none; }
.stock-row:last-of-type, .svc-line:last-child { border-bottom: 0; }
.svc-line { min-height: 48px; }
.svc-group { padding: var(--space-md) 20px; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.svc-group .group { margin: 0 0 var(--space-2xs); color: var(--color-ink); font-weight: 600; }
.keep .val { font-size: 1.75rem; font-weight: 700; }
.checkrow { border-bottom: 1px solid var(--color-rule-2); }
.checkrow .mark { border-radius: 9px; border: 0; background: var(--color-paper-3); }
.checkrow.ok .mark { background: var(--color-good-bg); } .checkrow.no .mark { background: var(--color-warn-bg); }
.tile, .tiles { border: 0; } .tiles { gap: var(--space-sm); }
.tile { border-radius: 16px; box-shadow: var(--shadow-card); }

/* Быстрый старт */
.qrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-md) 0; border-top: 1px solid var(--color-rule-2); }
.qrow:first-child { border-top: 0; }
.qrow > .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--color-paper-3); color: var(--color-ink); font-weight: 600; }
.qrow b { display: block; color: var(--color-ink); font-weight: 600; }
.qrow small { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.qrow input[inputmode] { width: 150px; }
.qgroup { padding: var(--space-md) 0; border-top: 1px solid var(--color-rule-2); }
.qgroup > b { display: block; color: var(--color-ink); font-weight: 600; }
.qgroup > small { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.person { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: end; margin-top: var(--space-sm); padding: var(--space-sm); border-radius: 14px; background: color-mix(in oklab, var(--color-paper-3) 55%, transparent); }
.sum { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 6px 0; color: var(--color-ink-2); }
.sum b { color: var(--color-ink); font-weight: 600; white-space: nowrap; }

/* Компьютер и телефон */
@media (max-width: 62.5rem) {
  .shell { display: block; padding: 0 0 var(--space-md); }
  .side { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px var(--space-md); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule-2); }  /* без backdrop-filter: он сделал бы .side опорой для fixed-меню внутри */
  .side-foot { border: 0; padding: 0; }
  .logo { padding: 0; } .logo i { width: 28px; height: 28px; }
  .nav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); inset-inline: 12px; top: auto; z-index: var(--z-sticky-nav); display: flex; gap: 2px; padding: 6px; border: 0; border-radius: 18px; background: var(--color-paper-2); box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 8px 28px rgb(0 0 0 / .18); }
  .nav a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; height: auto; min-height: 52px; padding: 4px 2px; font-size: 0.75rem; text-align: center; box-shadow: none; }
  .nav a.on { box-shadow: none; background: color-mix(in oklab, var(--color-accent) 11%, var(--color-paper-2)); color: var(--color-accent); }
  .nav a.on svg { color: currentColor; }
  .nav svg { width: 22px; height: 22px; }
  .nav .count { display: none; }
  .desk-only { display: none !important; }
  .mob-only, .nav a.mob-only { display: flex; }
  main, .shell.bare main { max-width: none; padding: var(--space-xs) var(--space-md) calc(108px + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.5rem; }
  .dash > *, .dash > .c8 { grid-column: span 12; }
  .dash > .c3 { grid-column: span 6; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .grid > .card, .grid > .card:nth-child(odd) { border: 0; padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 35rem) {
  .dash { gap: var(--space-sm); }
  .stat .num, .kpi .value { font-size: 1.25rem; }
  .qrow { grid-template-columns: 36px minmax(0, 1fr); }
  .qrow > :last-child { grid-column: 2; }
  .card { padding: var(--pad-card); }
}
@media print { .side, .nav { display: none !important; } .shell { display: block; } .card, .fact { box-shadow: none; } }
button, .btn { text-align: center; }

/* График выручки */
.linechart { position: relative; height: 240px; margin-top: var(--space-sm); touch-action: pan-y; border-radius: 8px; }
.linechart svg { display: block; }
.linechart .grid { stroke: var(--color-rule-2); stroke-width: 1; }
.linechart .ax { fill: var(--color-muted); font-size: 12px; }
.linechart .ln { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .area { fill: color-mix(in oklab, var(--color-accent) 12%, transparent); }
.linechart .cross { stroke: var(--color-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.linechart .dot { fill: var(--color-accent); stroke: var(--color-paper-2); stroke-width: 2; }
.chart-tip { position: absolute; z-index: 2; display: grid; padding: 8px 12px; border-radius: 10px; background: var(--color-ink); color: var(--color-paper-2); pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-card); }
.chart-tip b { font-weight: 700; } .chart-tip small { font-size: 0.75rem; opacity: .85; }
.chart-table { margin-top: var(--space-xs); }
.chart-table summary { min-height: 32px; }

/* Роли и интеграции */
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; }
.matrix .yes { color: var(--color-success); font-weight: 700; }
.matrix .no { color: var(--color-muted); }
.role-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule-2); }
.role-row:first-of-type { border-top: 0; }
.role-row .t { flex: 1 1 180px; min-width: 0; } .role-row b { display: block; color: var(--color-ink); font-weight: 500; }
.role-row small { color: var(--color-muted); }
.role-row form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; }
.integ .card-head h2 { font-size: 1rem; }
.integ p { font-size: 0.875rem; color: var(--color-ink-2); }
.integ .acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

/* Боксы на «Сегодня» */
.box-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-top: var(--space-sm); }
.box { padding: var(--space-sm) var(--space-md); border-radius: 16px; background: var(--color-paper-2); box-shadow: var(--shadow-card); min-width: 0; }
.box b { color: var(--color-ink); font-weight: 600; }
.box-pct { color: var(--color-ink); font-weight: 700; }
.box-state { margin-top: var(--space-xs); }
.box small { display: block; margin-top: 4px; color: var(--color-muted); font-size: 0.8125rem; }
.box.closed { opacity: .7; }
.day-line { margin-top: var(--space-sm); margin-bottom: var(--space-md); }
.tl-event { border: 0; border-radius: 7px; background: var(--color-blue-bg); color: var(--color-ink); box-shadow: none; }
.tl-event.confirmed, .tl-event.new { background: var(--color-warn-bg); box-shadow: none; }
.tl-event.done { background: var(--color-good-bg); color: var(--color-ink-2); box-shadow: none; }
.tl-window { display: none; }
.perm-box { flex: 1 1 100%; min-width: 0; }
.perm-box summary { min-height: 32px; font-size: 0.875rem; font-weight: 500; }
.perm-box summary .n { margin-left: 6px; white-space: nowrap; color: var(--color-muted); font-weight: 400; }
.role-row .perm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px 16px; align-items: center; max-width: 640px; padding: var(--space-xs) 0; }
.perm-form .perm-hint { grid-column: 1 / -1; margin: 0 0 4px; color: var(--color-muted); font-size: 0.8125rem; }
.perm-form button { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-xs); }
.car a.what { display: block; color: var(--color-ink); text-decoration: none; }
.car a.what:hover { text-decoration: underline; }

/* Длинные экраны разделами */
details.fold { margin-top: var(--space-md); }
details.fold > summary { min-height: 52px; padding: 0 20px; border-radius: 14px; background: var(--color-paper-2); box-shadow: var(--shadow-card); font-size: 1.0625rem; font-weight: 600; }
details.fold[open] > summary { margin-bottom: var(--space-sm); }

/* Песочница: полоса «Демо-студия» и карточка тура (app/sandbox.py, тур в admin.js) */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--space-md); padding: 10px 12px 10px 16px;
  border-radius: 14px; background: var(--color-blue-bg); color: var(--color-ink); }
.demo-bar b { font-weight: 600; }
.demo-bar span { flex: 1 1 0; min-width: 0; color: var(--color-ink-2); font-size: .9375rem; }
.demo-bar .small { background: var(--color-paper-2); }
.tour { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-modal); width: 360px; padding: 18px 18px 16px; border-radius: 20px;
  background: #14161f; color: #fff; box-shadow: 0 12px 40px rgb(20 22 31 / .28); }
[data-theme="dark"] .tour { background: #222634; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 12px 40px rgb(0 0 0 / .5); }   /* в тёмной теме карточка не сливается с фоном */
.tour-step { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; color: rgb(255 255 255 / .6); }
.tour-step button { border: 0; background: none; color: inherit; font: inherit; font-size: 1.375rem; line-height: 1; padding: 2px 6px; min-height: 0; cursor: pointer; }
.tour h3 { margin: 6px 0 4px; color: inherit; font-size: 1.125rem; font-weight: 600; }
.tour p { margin: 0; color: rgb(255 255 255 / .82); font-size: .9375rem; line-height: 1.45; }
.tour-dots { display: flex; gap: 4px; margin: 14px 0 12px; }
.tour-dots i { flex: 1; height: 4px; border-radius: 9px; background: rgb(255 255 255 / .18); }
.tour-dots i.on { background: #ff8f4d; }
.tour-nav { display: flex; gap: 8px; }
.tour-nav button { flex: 1; min-height: 44px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.tour-nav .back { flex: 0 0 auto; padding: 0 14px; background: rgb(255 255 255 / .12); color: inherit; font-weight: 500; }
.tour-nav .next { background: #c94c15; color: #fff; }
.tour-nav .next:hover { background: #b0410f; }
.tour-mark { position: relative; z-index: var(--z-raised); outline: 3px solid var(--color-accent); outline-offset: 4px; border-radius: 14px;
  animation: tour-pulse 1.6s var(--ease-out) infinite; }
@keyframes tour-pulse { 0%, 100% { outline-offset: 4px; } 50% { outline-offset: 8px; } }
@media (max-width: 62.5rem) { .tour { left: 12px; right: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .tour-mark { animation: none; } }
/* «Пройти тур заново» внизу «Моей очереди» и «Ещё» — на телефоне; на компьютере кнопка «Тур» у «Темы». */
.tour-again { display: none; margin: var(--space-xl) auto 0; padding: 10px 14px; border: 0; background: none; color: var(--color-muted);
  font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tour-again:hover { color: var(--color-ink); }
@media (max-width: 62.5rem) {
  .tour-again { display: block; }
  .touring main { padding-bottom: calc(320px + env(safe-area-inset-bottom)); }   /* нижнюю кнопку можно поднять над карточкой */
}
@media print { .demo-bar, .tour, .tour-again { display: none !important; } }

/* Заказ со строками (макет mockups/order-lines.html): работы и товары по разделам, окно «+ Работа / + Товар». */
.ol-group { margin-top: var(--space-md); color: var(--color-muted); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-rule-2); list-style: none; }
details.ol-wrap > summary.ol { cursor: pointer; }
details.ol-wrap > summary.ol::-webkit-details-marker { display: none; }
details.ol-wrap > summary.ol::marker { content: ""; }
.ol b { font-weight: 500; min-width: 0; }
.ol small { grid-column: 1; color: var(--color-muted); font-size: .8125rem; }
.ol .m { grid-row: 1 / span 2; grid-column: 2; text-align: right; white-space: nowrap; }
.kind { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: var(--radius-pill); font-size: .6875rem; font-weight: 600; vertical-align: 1px; }
.kind.work { background: var(--color-blue-bg); color: var(--color-accent-2); }
.kind.goods { background: var(--color-good-bg); color: var(--color-success); }
.ol-edit { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: end; margin-top: 8px; padding: 12px; border-radius: 14px 14px 0 0; background: var(--color-paper-3); }
.ol-edit input, .ol-edit select, .ol-edit .stepper { background: var(--color-paper-2); }
.ol-del { margin: 0 0 8px; padding: 0 12px 10px; border-radius: 0 0 14px 14px; background: var(--color-paper-3); }
.add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--space-sm); }
.add-row .btn-line { margin: 0; min-height: 48px; }
.big-sum { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.profit { width: 100%; margin-top: 8px; }
.profit th, .profit td { padding: 6px 4px; font-size: .8125rem; }
.table-scroll { overflow-x: auto; }
.pick-sheet { width: min(560px, calc(100% - 24px)); max-height: 86vh; padding: 16px 16px 24px; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-card); }
.pick-sheet::backdrop { background: rgb(20 22 31 / .35); }
.pick-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pick-sheet input[type=search] { width: 100%; margin: 12px 0 4px; }
.pick-for { margin: 8px 0 4px; }
.pick { display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 8px 4px; border-bottom: 1px solid var(--color-rule-2); background: none; border-radius: 0; text-align: left; font-weight: 400; color: var(--color-ink); text-decoration: none; }
.pick:hover { background: var(--color-paper-3); }
.pick small { display: block; color: var(--color-muted); font-size: .8125rem; }
.pick .m { white-space: nowrap; }
.pick.add { color: var(--color-accent); font-weight: 500; }
@media (max-width: 62.5rem) {
  .pick-sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0; max-height: 88vh; }
}

/* Направления студии */
.dirs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); margin-top: var(--space-md); }
.dir-form { margin: 0; display: grid; }
.dir { position: relative; display: grid; gap: 6px; align-content: start; justify-items: start; width: 100%; min-height: 116px; padding: 16px 48px 16px 16px; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); text-align: left; font-weight: 400; color: var(--color-ink); outline: 2px solid transparent; }
.dir:hover { background: var(--color-paper-2); outline-color: var(--color-rule); }
.dir.on { outline-color: var(--color-accent); }
.dir b { font-size: 1.0625rem; font-weight: 600; }
.dir small { color: var(--color-muted); font-size: .8125rem; line-height: 1.4; }
.dir-mark { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--color-rule); }
.dir.on .dir-mark { border-color: var(--color-accent); background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dir-add { align-content: end; gap: 8px; padding: 16px; border-radius: var(--radius-card); background: var(--color-paper-3); }
.set-row { display: grid; gap: 6px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--color-rule-2); }
.set-row:last-child { border-bottom: 0; }
.set-row > span { color: var(--color-muted); font-size: .8125rem; }
.set-row .chips { margin-top: 0; }
.chip.plus { background: none; outline: 1px dashed var(--color-rule); color: var(--color-ink-2); }
a.chip { color: var(--color-ink); text-decoration: none; }
.chip-x { margin: 0; gap: 4px; padding-right: 6px; }
.chip-x .x { min-height: 28px; width: 28px; padding: 0; border-radius: 99px; background: none; color: var(--color-muted); font-size: 1rem; }
.chip-x .x:hover { background: var(--color-rule); color: var(--color-ink); }
.inline-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.inline-add input[name] { flex: 1 1 200px; }

/* Склад одним экраном и «Поставщики» */
.stock-list { margin-top: var(--space-md); padding-top: 4px; padding-bottom: 4px; }
.stock-search { width: 100%; margin-top: var(--space-md); }
.item-card > summary { list-style: none; cursor: pointer; }
.item-card > summary::-webkit-details-marker { display: none; }
.item-card > summary::marker { content: ""; }
.item-card + .item-card > summary { border-top: 1px solid var(--color-rule-2); }
.item-card .acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
.item-card .act[open] { flex-basis: 100%; }
.item-card .act > summary { list-style: none; }
.item-card .act > summary::-webkit-details-marker { display: none; }
.item-card .act[open] > summary { background: var(--color-ink); color: var(--color-paper-2); }
.item-card .act-form { margin-top: 8px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); align-items: end; padding: 12px; border-radius: 14px; background: var(--color-paper-3); }
.item-card .act-form input, .item-card .act-form select, .item-card .act-form .stepper { background: var(--color-paper-2); }
.chip.warn { background: var(--color-warn-bg); color: var(--color-warn); }
.supplier-card { display: grid; gap: 10px; }
.supplier-card .name { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; color: var(--color-ink); text-decoration: none; }
.supplier-card .name small { grid-column: 1; color: var(--color-muted); font-size: .8125rem; }
.supplier-card .name .m { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.supplier-card .pair { margin: 0; }
.buy-rows { display: grid; gap: 12px; }
.buy-row { display: grid; gap: 10px; }
.buy-head { display: flex; justify-content: space-between; align-items: center; }
.buy-head legend { float: left; padding: 0; }
.order-add { padding-top: 12px; }
.order-add select { width: 100%; }
.order-row > input { width: 120px; flex: none; text-align: center; font-weight: 600; }

/* Деньги: «Заработали» и «Получили деньгами» рядом (на телефоне — друг под другом) */
.money-pair { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); margin-top: var(--space-md); }
.money-box .money-row { padding: var(--space-sm) 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--color-rule-2); }
.money-box .money-row:last-child { border-bottom: 0; padding-bottom: 0; }
.money-box .money-row.result { background: none; }
.money-box .money-row.result .label { color: var(--color-muted); }
.money-box .money-row.result .money-val { color: var(--color-accent); }
.money-box .money-row.result .bad-text { color: var(--color-error); }
.money-box .money-row small { display: block; margin-top: var(--space-3xs); }

/* «Ещё»: раздел — карточка, подразделы — строки внутри неё */
.more-groups { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start; margin-top: var(--space-md); }
.more-group { display: grid; border-radius: 16px; background: var(--color-paper-2); box-shadow: var(--shadow-card); overflow: hidden; }
.more-group a { color: var(--color-ink); text-decoration: none; }
.more-group a:hover { background: var(--color-paper-3); }
.more-group .head { display: flex; flex-wrap: nowrap; margin: 0; align-items: center; gap: var(--space-md); min-height: 72px; padding: var(--space-sm) var(--space-md); font-weight: 500; }
.more-group .head span { display: grid; flex: 1; text-align: left; }
.more-group .head, .more-group .sub { justify-content: flex-start; flex-direction: row; align-items: center; height: auto; }
.more-group .head small { color: var(--color-muted); font-size: 0.8125rem; font-weight: 400; }
.more-group svg { width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 12px; background: var(--color-paper-3); color: var(--color-accent); }
.more-group .sub { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-md) 0 calc(40px + 2 * var(--space-md)); border-top: 1px solid var(--color-rule-2); font-size: 0.9375rem; }

/* =====================================================================================================
   Аккуратный стиль (макет mockups/admin-polish.html): шапка страницы, полоса цифр, списки строками,
   статус словом и цветом, две колонки на компьютере. Отступы — через --pad-card и --row-h из tokens.css.
   ===================================================================================================== */
.eyebrow { color: var(--color-muted); font-size: 0.8125rem; font-weight: 500; }
.head h1 { margin-top: 2px; }
.head .toolbar { gap: var(--space-xs); }
.layout { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; margin-top: var(--space-sm); }
.layout > .stack, .stack { display: grid; gap: var(--space-sm); min-width: 0; align-content: start; }
.layout > * { min-width: 0; margin: 0; }
.card > h2:first-child, .card > .card-head:first-child h2 { margin: 0 0 var(--space-2xs); }
.card > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.card > h2 small, .card-head small { color: var(--color-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }

/* Полоса цифр: одна главная и до трёх вспомогательных */
.kpis { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.kpis > div { min-width: 0; padding: 14px var(--pad-card); border-left: 1px solid var(--color-rule-2); }
.kpis > div:first-child { border-left: 0; }
.kpis > div > span { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.kpis b { display: block; margin-top: 2px; overflow: hidden; color: var(--color-ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.kpis .main b { font-size: 1.875rem; letter-spacing: -0.03em; }
.kpis em { display: block; font-style: normal; font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.kpis em.ok-text { color: var(--color-success); } .kpis em.warn-text { color: var(--color-warn); }

/* Список строками: время | что | сумма и статус. Строка — ссылка или блок с действиями под ней. */
.vlist { margin: 0 calc(-1 * var(--pad-card)); }
.vgroup { margin: var(--space-sm) 0 2px; color: var(--color-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.card > .vgroup:first-of-type { margin-top: var(--space-2xs); }
.vitem { border-top: 1px solid var(--color-rule-2); }
.vlist > .vitem:first-child { border-top: 0; }
.vrow { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-sm); min-height: var(--row-h); padding: var(--space-xs) var(--pad-card); color: inherit; text-decoration: none; }
.vrow.two { grid-template-columns: minmax(0, 1fr) auto; }
a.vrow:hover, .vitem > a.vrow:hover { background: color-mix(in oklab, var(--color-paper-3) 60%, transparent); }
.vrow .t { align-self: start; padding-top: 1px; color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vrow .w { min-width: 0; }
.vrow .w b { display: block; overflow: hidden; color: var(--color-ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.vrow .w small { display: block; overflow: hidden; color: var(--color-muted); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.vrow .e { display: grid; justify-items: end; gap: 4px; }
.vrow .s { color: var(--color-ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vrow .s.warn-text { color: var(--color-warn); } .vrow .s.bad-text { color: var(--color-error); }
.vacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 var(--pad-card) var(--space-sm) calc(var(--pad-card) + 50px + var(--space-sm)); }
.vacts form { display: contents; }
.vacts .btn, .vacts button { min-height: 40px; padding: 0 var(--space-sm); font-size: 0.875rem; }
.vacts details { position: relative; }
.vacts details > summary { min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-ctl); background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.875rem; font-weight: 500; list-style: none; }
.vacts details > summary::-webkit-details-marker { display: none; }
.vacts details[open] { flex-basis: 100%; }
.vacts details[open] > summary { color: var(--color-ink); }
.vacts .more-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.vnote { padding: 0 var(--pad-card) var(--space-xs) calc(var(--pad-card) + 50px + var(--space-sm)); font-size: 0.8125rem; }
.empty { padding: var(--space-md) 0 var(--space-2xs); color: var(--color-muted); }

/* Статус: точка + слово (никогда только цвет) */
.tag.dot { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; font-size: 0.75rem; }
.tag.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Посты: строка с полоской загрузки */
.postline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-sm); padding: 10px 0; border-top: 1px solid var(--color-rule-2); }
.postline:first-of-type { border-top: 0; }
.postline b { color: var(--color-ink); font-weight: 500; }
.postline .pct { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.postline .meter { grid-column: 1 / -1; margin: 0; }
.postline .meter i { background: var(--color-accent); }
.postline small { grid-column: 1 / -1; color: var(--color-muted); font-size: 0.8125rem; }
.postline.closed { opacity: .65; }

/* Ссылки-строки внизу карточки и карточка-меню */
.linkrows { display: grid; margin: var(--space-2xs) calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)); }
.linkrows > a, .linkrows > form > button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; min-height: 48px; padding: 0 var(--pad-card); border: 0; border-top: 1px solid var(--color-rule-2); border-radius: 0; background: none; color: var(--color-ink); font-weight: 500; text-align: left; text-decoration: none; }
.linkrows > form { margin: 0; }
.linkrows > a::after, .linkrows > form > button::after { content: "›"; color: var(--color-muted); font-size: 1.25rem; line-height: 1; }
.linkrows > a:hover, .linkrows > form > button:hover { background: color-mix(in oklab, var(--color-paper-3) 60%, transparent); }
.linkrows small { margin-left: auto; color: var(--color-muted); font-size: 0.8125rem; font-weight: 400; }
.card.menu-card { padding: 0; overflow: hidden; }
.card.menu-card .linkrows { margin: 0; }
.card.menu-card .linkrows > :first-child, .card.menu-card .linkrows > form:first-child > button { border-top: 0; }

/* Крупная цифра карточки и разбивка под ней */
.figure-big { display: block; margin: 2px 0 4px; color: var(--color-ink); font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figure-big.bad-text { color: var(--color-error); }
.figure-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); margin: var(--space-sm) calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)); border-top: 1px solid var(--color-rule-2); }
.figure-split > div { padding: var(--space-sm) var(--pad-card); border-left: 1px solid var(--color-rule-2); }
.figure-split > div:first-child { border-left: 0; }
.figure-split span { display: block; color: var(--color-muted); font-size: 0.8125rem; }
.figure-split b { color: var(--color-ink); font-size: 1.125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Кнопка-действие на телефоне: на компьютере она в шапке */
.phone-acts { display: none; }
.desk-act { display: inline-flex; }

/* Таблица, которая на телефоне становится строками: подписи колонок из data-label */
@media (max-width: 40rem) {
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody { display: block; }
  table.stack-sm tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-sm); padding: 10px 0; border-bottom: 1px solid var(--color-rule-2); }
  table.stack-sm tr:last-child { border-bottom: 0; }
  table.stack-sm td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  table.stack-sm td.num { text-align: right; }
  table.stack-sm td[data-label]:not(:first-child)::before { content: attr(data-label) " "; color: var(--color-muted); font-size: 0.8125rem; }
  table.stack-sm .hide-sm { display: none; }
}

@media (max-width: 62.5rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis .main { grid-column: 1 / -1; border-bottom: 1px solid var(--color-rule-2); }
  .kpis > div:nth-child(2) { border-left: 0; }
  .kpis b { font-size: 1.125rem; }
  /* «Записать машину» длиннее соседней — ей шире колонка, чтобы на 375 px текст шёл в одну строку. */
  .phone-acts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xs); }
  .phone-acts > :only-child { grid-column: 1 / -1; }
  .phone-acts .btn { min-height: 48px; }
  .desk-act { display: none; }
  .desk-only-block { display: none !important; }
  .figure-big { font-size: 2rem; }
}
/* Строка-карточка (реестр долгов и т. п.): тот же отступ, что у карточки */
.lrow.card { padding: 12px var(--pad-card); }
.cards > .lrow.card:first-of-type { border-top: 0; }
/* Клиенты: на телефоне строка «имя — сумма», под ней «последний визит — визиты» */
.sm-only { display: none; }
.clients-table td.c-name a { color: var(--color-ink); font-weight: 500; text-decoration: none; }
@media (max-width: 40rem) {
  .clients-table thead { display: none; }
  .clients-table, .clients-table tbody { display: block; }
  .clients-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sum" "last visits"; gap: 2px var(--space-sm); padding: 10px 0; border-bottom: 1px solid var(--color-rule-2); }
  .clients-table tbody tr:last-child { border-bottom: 0; }
  .clients-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .clients-table td[colspan] { grid-column: 1 / -1; }
  .clients-table .c-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clients-table .c-sum { grid-area: sum; color: var(--color-ink); font-weight: 600; }
  .clients-table .c-last { grid-area: last; color: var(--color-muted); font-size: 0.8125rem; }
  .clients-table .c-visits { grid-area: visits; color: var(--color-muted); font-size: 0.8125rem; font-weight: 400; }
  .clients-table .hide-sm { display: none; }
  .sm-only { display: inline; }
  .card:has(> .clients-table) { padding-block: 4px; }
}
/* Визит: строки оплат переносятся, колонки не распирают страницу */
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-xs); padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule-2); }
.pay-line > span { flex: 1 1 160px; min-width: 0; }
.pay-line select { min-height: 40px; }
.sticky > *, .split > div > *, .stack > * { min-width: 0; }
.head .crumb { margin-bottom: 2px; }
/* Переключатели на телефоне — одна строка с прокруткой внутри, а не серый блок в три ряда */
@media (max-width: 40rem) {
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pills::-webkit-scrollbar { display: none; }
  .pills a { flex: none; white-space: nowrap; }
}
.svc-line > span:first-child { min-width: 0; }
.svc-line .m { flex: 0 1 auto; min-width: 0; text-align: right; white-space: normal; }
/* Склад: позиция — строка списка, действия раскрываются под ней */
.kpis.kpis-3 { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
.kpis b.warn-text { color: var(--color-warn); }
.vlist .item-card .acts { padding: 0 var(--pad-card) var(--space-sm); }
.vlist .item-card .act-form { margin-top: 6px; }
.vlist .item-card[open] > summary { background: color-mix(in oklab, var(--color-paper-3) 50%, transparent); }
.card .stock-search { margin: var(--space-2xs) 0 var(--space-xs); }
details.card > summary { min-height: 28px; }
@media (max-width: 62.5rem) {
  .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Команда: работник — строка, форма раскрывается под ней */
.person-row > summary { list-style: none; cursor: pointer; }
.person-row > summary::-webkit-details-marker { display: none; }
.person-row[open] > summary { background: color-mix(in oklab, var(--color-paper-3) 50%, transparent); }
.person-form { padding: var(--space-sm) var(--pad-card) var(--pad-card); }
.card:has(> .vlist:first-child) { padding-block: 4px; }
/* Поставщики: контакты — строка ссылок, а не пачка кнопок-пилюль */
.supplier-card .contacts { margin: 0; gap: 4px 14px; font-size: 0.875rem; }
.clink { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-accent-2); font-weight: 500; text-decoration: none; }
.clink:hover { text-decoration: underline; }
.note { font-size: 0.9375rem; line-height: 1.45; }

/* СТО: заказ-наряд (макет mockups/sto.html) — машина, этапы, жалоба, ответ клиента по строке, запчасть под заказ. */
.carline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.carline .chip { min-height: 32px; font-size: .8125rem; text-decoration: none; color: var(--color-ink-2); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.steps { display: flex; gap: 4px; margin: 14px 0 0; padding: 0; overflow-x: auto; }
.head > div:has(> .steps) { min-width: 0; max-width: 100%; }   /* полоса этапов прокручивается, а не растягивает шапку */
.steps button, .steps span { flex: none; min-height: 32px; padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.steps .done { background: var(--color-good-bg); color: var(--color-success); }
.steps .now { background: var(--color-ink); color: var(--color-paper-2); }
.complaint-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 4px; }
.complaint { margin: 0 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--color-paper-3); }
.ol.wait small { color: var(--color-warn); }
.answer-list { display: grid; gap: 4px; margin-top: 12px; }
.answer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 6px 0; border-top: var(--rule-hair) solid var(--color-rule); cursor: pointer; }
.answer-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent, currentColor); }
.answer-row small { display: block; }
.answer-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ol-answer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px 0; }
.ol.rec form { display: inline; margin-left: 8px; }
.doc-links { margin: 16px 0 0; color: var(--color-muted); }
.due-box { display: grid; gap: 8px; padding: 4px 0 0; }
.due-form { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)) auto; gap: 8px; align-items: end; }
@media (max-width: 40rem) { .due-form { grid-template-columns: 1fr; } }
.part-form { display: grid; gap: 12px; margin-top: 8px; }
.vin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px 16px; margin: 0; }
.vin-facts div { display: grid; gap: 2px; }
.vin-facts dt { color: var(--color-muted); font-size: .8125rem; }
.vin-facts dd { margin: 0; color: var(--color-ink); font-weight: 500; }
@media (max-width: 40rem) { .complaint-form { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }

/* Чья машина и кто работал (макет М1, _car.html): марка/модель, номер-плашка, клиент и мастер */
.vcar { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; color: var(--color-ink-2); font-size: .8125rem; white-space: nowrap; }
.vcar > span { overflow: hidden; text-overflow: ellipsis; }
.vcar .none { color: var(--color-warn); }
.plate { flex: none; padding: 0 6px; border: 1px solid var(--color-rule); border-radius: 5px; background: var(--color-paper); color: var(--color-ink); font-size: .75rem; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.vwho { display: block; margin-top: 1px; overflow: hidden; color: var(--color-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.vwho b, .vrow .w .vwho b { display: inline; overflow: visible; color: var(--color-ink-2); font-weight: 500; white-space: inherit; }   /* .vrow .w b — блочный заголовок строки, имя мастера — нет */
.ohead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-md); }
.ohead-chips .chip-big { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--color-paper-3); color: var(--color-ink); font-weight: 500; text-decoration: none; }
.ohead-chips .chip-big small { color: var(--color-muted); font-weight: 400; }
@media (max-width: 40rem) {
  .vrow .w b { white-space: normal; }
  .vcar { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .vwho { white-space: normal; }
}
.photo-strip { display: flex; gap: 8px; margin: 12px 0 0; overflow-x: auto; }
.photo-strip img { display: block; width: 88px; height: 88px; border-radius: 10px; object-fit: cover; background: var(--color-paper-3); }

/* Сводка: период сверху меняет и плитки, и график; плитки — ссылки на подробности */
.period-top { margin: 0 0 var(--space-sm); }
a.stat-link { color: inherit; text-decoration: none; }
a.stat-link:hover { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-rule); }
a.stat-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Схема оплаты в строке работника: сегменты-переключатели и поля только выбранной схемы */
.pay-form { padding: 0 var(--pad-card) var(--pad-card); }
.pay-form fieldset { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-sm) 0 0; border: 0; border-top: 1px solid var(--color-rule-2); }
.pay-form legend { padding: var(--space-sm) 0 0; color: var(--color-ink); font-weight: 600; }
.pay-seg { flex-wrap: wrap; }
.pay-seg label { position: relative; }
.pay-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pay-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; color: var(--color-muted); font-size: .875rem; font-weight: 500; cursor: pointer; }
.pay-seg input:checked + span { background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.pay-seg input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pay-form [hidden] { display: none !important; }

/* Зарплата: на компьютере таблица, на телефоне карточки (колонки не прячутся) */
.pay-cards { display: none; gap: var(--space-sm); }
.pay-cards .card > h2 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 2px; font-size: 1rem; }
.pay-cards .card > h2 small { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.pay-dl { display: grid; gap: 6px; margin: var(--space-sm) 0 0; }
.pay-dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--color-rule-2); }
.pay-dl dt { color: var(--color-muted); font-size: .875rem; }
.pay-dl dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .pay-table { display: none; } .pay-cards { display: grid; } }
.pay-form fieldset > button { justify-self: start; }

/* Подсказки по поставщикам: у кого дешевле, кому заказать */
.hint-cheaper { display: block; color: var(--color-accent-2); font-size: .8125rem; }
.order-hint { margin: 0; padding: 0 var(--pad-card) var(--space-xs); color: var(--color-ink-2); font-size: .875rem; }
.order-hint a { font-weight: 600; }
.receive-part summary { font-weight: 500; cursor: pointer; }
.vrow .w small.wrap { white-space: normal; }   /* подсказку не режем многоточием */

/* ===== Раскладка М2 (mockups/demo-feedback.html#m2): ровная сетка карточек одной высоты, группы с заголовком,
   действия «+ …» отдельной строкой под группой, настройки — группы узкими колонками ===== */
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); grid-auto-rows: 1fr; gap: var(--gap, 12px); }
.gtile { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-width: 0; padding: var(--pad-card); border-radius: var(--radius-card, 18px); background: var(--color-paper-2); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
a.tile:hover { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-rule); }
a.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gtile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; }
.gtile .name { min-width: 0; overflow-wrap: anywhere; color: var(--color-ink); font-weight: 600; }
.gtile p { margin: 0; color: var(--color-muted); font-size: .8125rem; }
.gtile .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-rule-2); }
.gtile .foot .eyebrow { font-size: .8125rem; }
.gtile .big { color: var(--color-ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gtile .big.minus { color: var(--color-error); }
.gtiles + .vgroup, .tiles-group + .tiles-group { margin-top: var(--space-md); }
.tiles-group > .vgroup { margin: 0 0 var(--space-xs); }
.addrow { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-sm) 0 0; }
.addrow .btn, .addrow button { border: 1px dashed var(--color-rule); background: transparent; box-shadow: none; }
.price-range { white-space: nowrap; font-variant-numeric: tabular-nums; }
.setcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap, 12px); align-items: start; }
.setcols > .card > h2 { margin-top: 0; }
@media (max-width: 40rem) { .gtiles { grid-auto-rows: auto; } }
.svc-card { padding-bottom: var(--space-sm); }
.svc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.svc-head h2 { margin: 0; font-size: 1rem; }
.svc-head h2 small { font-weight: 500; }
.svc-edit[open] { flex-basis: 100%; }
.svc-card .vrow.off { opacity: .6; }
.svc-card .vrow .e { justify-items: end; }
.svc-add { margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-2); display: block; }
.svc-add > summary { list-style: none; }
.svc-add > summary::-webkit-details-marker { display: none; }
.addrow > summary.btn { border: 1px dashed var(--color-rule); background: transparent; box-shadow: none; }
.gtile .lines { display: grid; gap: 6px; }
.gtile .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: .875rem; }
.gtile .line .bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--color-paper-3); overflow: hidden; }
.gtile .line .bar i { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
/* Настройки: группы-колонки, ссылки на подразделы строками, кнопка «Сохранить» под группами основной формы */
.set-form > h2, .set-form > summary { margin: 0 0 var(--space-2xs); font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.set-form > summary { cursor: pointer; }
.set-form.form-grid { grid-template-columns: minmax(0, 1fr); }
.set-form .hours-row { grid-template-columns: 1fr auto; gap: 4px 8px; }
.set-form .hours-row input[type=time] { min-width: 0; }
.set-links { padding: 0; overflow: hidden; }
.set-links .linkrows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px var(--pad-card); }
.set-links .linkrows a > span { display: grid; gap: 1px; min-width: 0; }
.set-links .linkrows small { color: var(--color-muted); font-size: .8125rem; font-weight: 400; }
.save-bar { display: flex; justify-content: flex-end; }
.gtile .top { padding: 0; border: 0; background: none; box-shadow: none; position: static; }
/* Часы работы: день в одну строку «Пн ☑ 09:00 21:00», на телефоне слово «работаем» только для экранного диктора */
.set-form .hours-row { grid-template-columns: 2.2em auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; }
@media (max-width: 40rem) { .hours-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Онбординг по типу студии (макет М3): шаги, плитки типов, услуги с ценой, люди со схемой оплаты */
.ob-steps { display: flex; gap: 6px; margin: 0 0 var(--space-md); padding: 0; list-style: none; overflow-x: auto; }
.ob-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--color-paper-3); color: var(--color-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.ob-steps li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-paper-2); font-style: normal; font-weight: 600; }
.ob-steps li.on { background: var(--color-ink); color: var(--color-paper); }
.ob-steps li.on i { background: var(--color-accent); color: var(--color-accent-ink); }
.ob-steps li.done i { background: var(--color-good-bg); color: var(--color-success); }
.ob-steps li a { color: inherit; }
.ob-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); grid-auto-rows: 1fr; gap: var(--gap, 12px); }
.ob-type { display: grid; align-content: start; gap: 8px; min-height: 160px; padding: var(--pad-card); border-radius: var(--radius-card, 18px); background: var(--color-paper-2); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-rule); color: inherit; text-decoration: none; }
.ob-type:hover { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--color-accent); }
.ob-type:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ob-type b { color: var(--color-ink); font-size: 1.25rem; font-weight: 600; }
.ob-type small { color: var(--color-muted); font-size: .875rem; }
.ob-type .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-type .tags span { padding: 3px 10px; border-radius: 99px; background: var(--color-paper-3); color: var(--color-ink-2); font-size: .8125rem; }
.ob-form { display: grid; gap: var(--gap, 12px); max-width: 760px; }
.ob-step { margin: 0; border: 0; }
.ob-step > legend { float: left; width: 100%; margin: 0 0 var(--space-xs); padding: 0; color: var(--color-ink); font-size: 1.125rem; font-weight: 600; }
.ob-step > legend small { display: block; color: var(--color-muted); font-size: .8125rem; font-weight: 400; }
.ob-step > legend + * { clear: both; }
.ob-svc { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; align-items: center; gap: 8px 12px; min-height: 56px; padding: 8px var(--pad-card); }
.ob-svc .check { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-svc .check span { display: grid; min-width: 0; }
.ob-svc .check b { color: var(--color-ink); font-weight: 500; }
.ob-svc .check small { color: var(--color-muted); font-size: .8125rem; }
.ob-price { display: flex; align-items: center; gap: 6px; }
.ob-price input { min-width: 0; text-align: right; }
.ob-own input[name^="own_name"] { width: 100%; }
.ob-person { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule-2); }
.ob-person:first-of-type { border-top: 0; padding-top: 0; }
.ob-person [hidden] { display: none !important; }
.ob-nav { display: flex; justify-content: flex-end; gap: 8px; }
.ob-nav [data-ob-back] { margin-right: auto; }
@media (max-width: 40rem) {
  .ob-svc { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  .ob-nav .btn { flex: 1; }
}

/* Машина без записи, все посты заняты: кому помешаем и выбор «в очередь / всё равно сейчас». */
.busy-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.busy-list li { display: flex; flex-wrap: wrap; gap: 4px var(--space-sm); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-paper-2); }
.busy-list b { min-width: 5.5em; }
.busy-choice { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.busy-choice .btn-big { margin-top: 0; }

/* Телефон и сенсорный экран: любой элемент управления не ниже 44 px (руководство по касаниям, этап 7 правок демо).
   Ссылки внутри текста не трогаем — у них своя строка. Шкала времени в расписании по постам масштабная, её не растягиваем. */
@media (max-width: 40rem), (pointer: coarse) {
  :is(button, .btn, a.btn, summary.btn, .pills a, .seg a, .seg button, .pay-seg span, .chip, select, textarea,
      input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range])) { min-height: 44px; }
  :is(.pills a, .seg a, .chip, a.btn, summary.btn) { display: inline-flex; align-items: center; }
  label.check, .check { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .linkrows > a, .set-links .linkrows a { min-height: 52px; }
  /* Простые «раскрывашки» без класса: высота за счёт отступов, без display:flex (иначе пропадёт треугольник)
     и без line-height (двухстрочные summary.vrow раздулись бы). У summary с классом своя высота. */
  summary:not([class]), .card > summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
  .ob-steps li { min-height: 44px; }
  .ob-steps li a { display: inline-flex; align-items: center; min-height: 44px; }
  details.card > summary, details.fold > summary { display: list-item; min-height: 44px; box-sizing: border-box; }
  .clink { min-height: 44px; }
  .stock-row > a { display: inline-flex; align-items: center; min-height: 44px; }   /* контакты поставщика строкой ссылок — по телефону жмут пальцем */
  a.tag { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; }
  a.add { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  details > summary.small, .svc-edit > summary { padding-inline: 4px; }
}