/* =====================================================================
   smeta.css — калькулятор металлоизделий (docs/raskroy-smeta.md §2, этап В).

   Визуал перенесён из согласованного пользователем мокапа (артефакт
   7a4156c8, docs/raskroy-smeta.md §2) практически один в один — и десктоп,
   и мобильный брейкпоинт. Все классы намеренно с префиксом smeta- (кроме
   пары составных .smeta-lines-table td/th.num) — сайт большой, старый
   style.css держит правила на генерики вроде .btn/.summary/.unit, без
   префикса они бы протекли друг в друга (тот же урок, что и в
   raskroy2d.css/metall-product.css).
   ===================================================================== */

.smeta-page {
  --smeta-bg: #eef1f4;
  --smeta-surface: #ffffff;
  --smeta-surface-sunken: #f7f8fa;
  --smeta-border: #e0e0e0;
  --smeta-border-strong: #d8d8d8;
  --smeta-text: #26333f;
  --smeta-text-muted: #72808c;
  --smeta-text-faint: #aab3ba;
  --smeta-primary: #3b5473;
  --smeta-primary-dark: #2c3e50;
  --smeta-primary-soft: #eaeff4;
  --smeta-accent: #b8790f;
  --smeta-accent-soft: #fbeed7;
  --smeta-accent-strong: #8f5c09;
  --smeta-warn: #b23b3b;
  --smeta-warn-soft: #fbecec;
  --smeta-mono: 'Courier New', Courier, monospace;
  --smeta-shadow: 0 1px 2px rgba(38,51,63,0.05), 0 10px 28px -16px rgba(38,51,63,0.18);

  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 90px;
  color: var(--smeta-text);
  font-size: 15px;
  line-height: 1.5;
}
.smeta-page *{ box-sizing: border-box; }

/* ---------- шапка калькулятора ---------- */
.smeta-head{
  background: var(--smeta-surface);
  border: 1px solid var(--smeta-border);
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: var(--smeta-shadow);
}
.smeta-head__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.smeta-eyebrow{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--smeta-text-muted);
}
.smeta-badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--smeta-accent-strong);
  background: var(--smeta-accent-soft);
  padding: 4px 10px;
  border-radius: 20px;
}
.smeta-title-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.smeta-title-row h1{
  font-size: 15px;
  font-weight: 500;
  color: var(--smeta-text-muted);
  margin: 0;
  flex: 0 0 auto;
}
.smeta-name{
  font-size: 21px;
  font-weight: 700;
  color: var(--smeta-text);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  margin: -3px -8px;
  background: transparent;
  min-width: 240px;
  flex: 1 1 320px;
}
.smeta-name:hover, .smeta-name:focus{
  border-color: var(--smeta-border-strong);
  background: var(--smeta-surface-sunken);
  outline: none;
}
.smeta-sub{
  font-size: 14px;
  color: var(--smeta-text-muted);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0;
}

/* ---------- добавление строки ---------- */
.smeta-add-row-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 20px;
}
.smeta-add-row-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--smeta-primary);
  background: var(--smeta-primary-soft);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
}
.smeta-add-row-btn:hover{ background: var(--smeta-surface-sunken); border-color: var(--smeta-border-strong); }
.smeta-add-row-btn svg{ width: 14px; height: 14px; flex: 0 0 auto; }

.smeta-add-row-mobile{ display: none; }
.smeta-add-row-mobile > summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--smeta-primary);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  margin: 22px 0 4px;
}
.smeta-add-row-mobile > summary::-webkit-details-marker{ display: none; }
.smeta-add-row-mobile > summary svg{ width: 15px; height: 15px; }
.smeta-add-row-mobile[open] > summary{ border-radius: 8px 8px 0 0; margin-bottom: 0; }
.smeta-add-row-mobile-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--smeta-border);
  border: 1px solid var(--smeta-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  margin-bottom: 4px;
}
.smeta-add-row-mobile-grid .smeta-add-row-btn{
  border-radius: 0;
  justify-content: center;
  background: var(--smeta-surface);
  padding: 13px 8px;
  margin: 0;
}
.smeta-add-row-mobile-grid .smeta-add-row-btn:last-child{ grid-column: span 2; }

/* ---------- пустое состояние ---------- */
.smeta-empty{
  background: var(--smeta-surface);
  border: 1px dashed var(--smeta-border-strong);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  color: var(--smeta-text-muted);
  font-size: 14px;
}

/* ---------- таблица строк сметы ---------- */
.smeta-lines{
  background: var(--smeta-surface);
  border: 1px solid var(--smeta-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--smeta-shadow);
}
.smeta-lines-table{
  width: 100%;
  border-collapse: collapse;
}
.smeta-lines-table thead th{
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--smeta-text-muted);
  background: var(--smeta-surface-sunken);
  border-bottom: 1px solid var(--smeta-border);
  padding: 12px 14px;
  white-space: nowrap;
}
.smeta-lines-table th.smeta-num, .smeta-lines-table td.smeta-num{ text-align: right; }
.smeta-line-row > td{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--smeta-border);
  vertical-align: top;
  font-size: 14px;
}
.smeta-line-row:last-of-type > td{ border-bottom: none; }
.smeta-line-detail-row > td{
  padding: 4px 14px 16px;
  border-bottom: 1px solid var(--smeta-border);
}
.smeta-line-detail-row:last-of-type > td{ border-bottom: none; }

.smeta-type-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--smeta-text-muted);
  white-space: nowrap;
}
.smeta-type-tag svg{ width: 15px; height: 15px; flex: 0 0 auto; color: var(--smeta-primary); }

.smeta-line-name{ font-weight: 600; color: var(--smeta-text); }
.smeta-line-name-input{
  width: 100%;
  min-width: 160px;
  font: inherit;
  font-weight: 600;
  color: var(--smeta-text);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 5px;
  margin: -3px -5px;
  background: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* длинное название ("Амортизация/аренда оборудования") аккуратно обрезается многоточием, не голым обрывом посреди слова */
}
.smeta-line-name-input:hover, .smeta-line-name-input:focus{
  border-color: var(--smeta-border-strong);
  background: var(--smeta-surface-sunken);
  outline: none;
}
.smeta-line-name small{
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--smeta-text-muted);
  margin-top: 2px;
}
.smeta-live-dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3d8a5a;
  margin-right: 5px;
  vertical-align: 1px;
}
.smeta-live-dot.smeta-live-dot--err{ background: var(--smeta-warn); }

.smeta-lines-table td.smeta-num, .smeta-money{
  font-family: var(--smeta-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--smeta-text);
  white-space: nowrap;
}
/* Единица измерения — везде одинаковая "плашка" (даже там, где она просто
   текст, не select: "м"/"м²" у проката, "ч"/"₽/ч"/"%" у работы) и одинаковой
   МИНИМАЛЬНОЙ ширины — иначе короткое "%" и длинное "₽/услуга" дают разную
   суммарную ширину блока кол-во/цена, и поле ввода "прыгает" по горизонтали
   от строки к строке вместо того, чтобы стоять в одну линию. */
.smeta-unit{
  display: inline-block;
  min-width: 76px; /* хватает под самую длинную единицу из UNIT_OPTIONS — "₽/услуга" */
  font-family: inherit;
  font-weight: 500;
  color: var(--smeta-text-muted);
  font-size: 11.5px;
  text-align: left;
  background: var(--smeta-surface-sunken);
  border: 1px solid var(--smeta-border);
  border-radius: 5px;
  padding: 4px 8px;
}

/* обёртки кол-во/цена — контролируемый отступ между числом и единицей
   измерения (раньше был один текстовый пробел в разметке, из-за чего
   единица "прилипала" к числу), выравнивание пары как единого блока. */
.smeta-qty-cell, .smeta-price-cell{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.smeta-qty-input, .smeta-price-input{
  width: 68px;
  font-family: var(--smeta-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  color: var(--smeta-text);
  border: 1px solid var(--smeta-border-strong);
  border-radius: 5px;
  padding: 4px 7px;
  background: var(--smeta-surface);
  flex: 0 0 auto;
}
.smeta-price-input{ width: 78px; }
.smeta-price-input::placeholder{ font-weight: 400; font-size: 11px; }

/* единица измерения (select) у "Материал вручную"/"Амортизация"/"Покраска" —
   раньше рендерилась совсем без стилей (голый браузерный select, отсюда
   ощущение "оформление по дефолту"). Свой вид + компактная стрелка вместо
   нативной, справа от количества с ощутимым отступом (gap у .smeta-qty-cell). */
.smeta-unit-select{
  flex: 0 0 auto;
  min-width: 76px; /* тот же расчёт, что у .smeta-unit — "компл"/"услуга" не должны сдвигать колонку */
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--smeta-text-muted);
  background-color: var(--smeta-surface-sunken);
  border: 1px solid var(--smeta-border-strong);
  border-radius: 5px;
  padding: 4px 22px 4px 9px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2372808c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
}
.smeta-unit-select:hover, .smeta-unit-select:focus{
  border-color: var(--smeta-primary);
  color: var(--smeta-text);
  outline: none;
}

.smeta-row-remove{
  background: none;
  border: none;
  color: var(--smeta-text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.smeta-row-remove:hover{ color: var(--smeta-warn); }

/* доп. строка деталей — раскрой/наценка/тумблер работы. Отступ слева —
   под ширину колонки "Тип" над ней (~92px), чтобы поля вроде "Наценка"
   визуально начинались там же, где название строки, а не льнули к левому
   краю таблицы под иконкой типа. */
.smeta-line-detail{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-left: 92px;
  font-size: 12.5px;
  color: var(--smeta-text-muted);
}
.smeta-detail-field{ display: inline-flex; align-items: baseline; gap: 8px; }
.smeta-detail-field input{
  width: 60px;
  font-family: var(--smeta-mono);
  font-size: 12.5px;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 5px;
  padding: 4px 7px;
}
/* Панель режима "₽/см шва" (docs/raskroy-smeta.md §2.1/§8.7 — работа, режим
   по катету сварного шва) — катет + база при 3мм + наценка за проход, все
   три редактируемые. Число проходов — видно сразу, коротко, формула —
   спрятана в <details> (свёрнута по умолчанию), чтобы панель не выглядела
   перегруженной, но при этом ничего не пряталось "навсегда". */
.smeta-weld-panel{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--smeta-surface-sunken);
  border: 1px solid var(--smeta-border);
  border-radius: 8px;
}
.smeta-weld-row{ display: flex; flex-wrap: wrap; gap: 14px 24px; }
.smeta-weld-field{ display: flex; flex-direction: column; gap: 5px; }
.smeta-weld-field label{ font-size: 11px; color: var(--smeta-text-muted); }
.smeta-weld-input{
  width: 80px;
  font-family: var(--smeta-mono);
  font-size: 13px;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 5px;
  padding: 5px 8px;
}
.smeta-weld-passes{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--smeta-primary);
}
.smeta-weld-hint{
  margin: 0;
  font-size: 12px;
  color: var(--smeta-text-faint);
  line-height: 1.5;
}
.smeta-weld-formula{ font-size: 12px; }
.smeta-weld-formula summary{
  color: var(--smeta-primary);
  cursor: pointer;
  font-weight: 500;
  width: fit-content;
}
.smeta-weld-formula summary:hover{ text-decoration: underline; }
.smeta-weld-formula-body{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--smeta-border-strong);
  color: var(--smeta-text-muted);
  line-height: 1.6;
}
.smeta-weld-formula-body p{ margin: 0 0 4px; }
.smeta-weld-formula-body p:last-child{ margin-bottom: 0; }
.smeta-seg{
  display: inline-flex;
  align-self: flex-start; /* родитель (.smeta-line-detail у "Работы") — flex-column с align-items:stretch, без этого переключатель растягивался на всю ширину строки */
  border: 1px solid var(--smeta-border-strong);
  border-radius: 20px;
  overflow: hidden;
}
.smeta-seg button{
  font-size: 12px;
  padding: 6px 14px;
  border: none;
  background: var(--smeta-surface);
  color: var(--smeta-text-muted);
  cursor: pointer;
}
.smeta-seg button.is-active{ background: var(--smeta-primary); color: #fff; }

.smeta-cut-warning{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: var(--smeta-warn-soft);
  color: var(--smeta-warn);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 12px;
  margin-top: 4px;
}
.smeta-cut-warning svg{ width: 13px; height: 13px; flex: 0 0 auto; }
.smeta-cut-warning-actions{ display: inline-flex; gap: 14px; flex-wrap: wrap; }
.smeta-cut-warning-actions button{
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-size: inherit;
}

/* мини-раскрой встроенный в строку — точный расчёт по нескольким отрезкам,
   + визуальная схема справа (тот же язык, что у .raskroy-bar-* на странице
   товара, см. raskroy.css, только меньше — здесь это встроенная подсказка
   внутри строки сметы, не отдельный полноразмерный виджет). */
.smeta-cut-panel{
  margin-top: 12px;
  padding: 16px;
  background: var(--smeta-surface);
  border: 1px solid var(--smeta-border-strong);
  border-radius: 8px;
  width: 100%;
}
.smeta-cut-panel-cols{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.smeta-cut-panel-left{ flex: 1 1 240px; min-width: 220px; }
.smeta-cut-panel-viz{ flex: 1 1 200px; min-width: 180px; }
.smeta-cut-panel-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.smeta-cut-panel-row input{
  font-family: var(--smeta-mono);
  font-size: 12.5px;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 5px;
  padding: 5px 8px;
  width: 100px;
}
.smeta-cut-panel-btns{ display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 10px; }
.smeta-cut-panel-add, .smeta-cut-panel-calc, .smeta-cut-panel-apply{
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 16px;
  padding: 6px 14px;
  background: var(--smeta-surface-sunken);
  color: var(--smeta-primary);
  cursor: pointer;
}
.smeta-cut-panel-calc{ background: var(--smeta-primary); color: #fff; border-color: var(--smeta-primary); }
.smeta-cut-panel-result{ font-size: 12.5px; margin-top: 10px; color: var(--smeta-text); line-height: 1.6; }
.smeta-cut-panel-apply{ margin-left: 8px; }
.smeta-cut-panel-rm{ background: none; border: none; color: var(--smeta-text-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; }

/* схема хлыстов — уменьшенная копия .raskroy-bar-* (raskroy.css) */
.smeta-cut-bars{ display: flex; flex-direction: column; gap: 6px; }
.smeta-cut-bar-row{ display: flex; align-items: center; gap: 8px; }
.smeta-cut-bar-label{
  font-family: var(--smeta-mono);
  font-size: 10.5px;
  color: var(--smeta-text-muted);
  width: 54px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.smeta-cut-bar-track{
  flex: 1;
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--smeta-border-strong);
  background: #d8dde1;
}
.smeta-cut-bar-piece{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--smeta-mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--smeta-primary);
  border-right: 1px solid var(--smeta-surface-sunken);
  white-space: nowrap;
  overflow: hidden;
}
.smeta-cut-bar-piece:nth-child(odd){ background: var(--smeta-primary-dark); }
.smeta-cut-bar-waste{
  background: repeating-linear-gradient(45deg, #d8dde1, #d8dde1 5px, #c7ced3 5px, #c7ced3 10px);
  color: var(--smeta-text-faint);
  font-weight: 600;
  border-right: none;
}
.smeta-cut-bar-oversized{ color: var(--smeta-warn); font-size: 12px; margin-top: 8px; }

/* ---------- степень зачистки сварного шва ---------- */
.smeta-finish-picker{ width: 100%; margin-top: 10px; }
.smeta-finish-picker-label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--smeta-text-faint);
  margin-bottom: 7px;
}
.smeta-finish-options{
  display: flex;
  align-items: stretch; /* карточки одной высоты — по самому длинному названию ("Чисто, гладко...") */
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.smeta-finish-opt{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 92px;
  padding: 8px 6px 9px;
  border: 1.5px solid var(--smeta-border-strong);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  background: var(--smeta-surface);
  position: relative;
}
.smeta-finish-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.smeta-finish-thumb{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 5px;
  background: var(--smeta-surface-sunken);
  border: 1px dashed var(--smeta-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smeta-text-faint);
  overflow: hidden;
}
.smeta-finish-thumb svg{ width: 20px; height: 20px; }
.smeta-finish-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.smeta-finish-placeholder-tag{
  position: absolute;
  top: 3px; right: 3px;
  font-size: 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
}
.smeta-finish-name{ font-size: 11px; color: var(--smeta-text-muted); line-height: 1.25; }
/* ×N — всегда у нижнего края карточки (margin-top:auto забирает всё
   свободное место above себя), название — сразу под миниатюрой сверху,
   даже когда у соседней карточки название в 2 строки, а у этой в 1. */
.smeta-finish-mult{
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--smeta-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--smeta-text);
}
.smeta-finish-opt.is-selected{ border-color: var(--smeta-primary); background: var(--smeta-primary-soft); }
.smeta-finish-opt.is-selected .smeta-finish-thumb{ border-style: solid; border-color: var(--smeta-primary); color: var(--smeta-primary); }
.smeta-finish-opt.is-selected .smeta-finish-mult{ color: var(--smeta-primary); }
.smeta-finish-note{ font-size: 12px; color: var(--smeta-text-muted); margin-top: 8px; }
.smeta-finish-note b{ font-family: var(--smeta-mono); color: var(--smeta-text); }

/* ---------- сводка ---------- */
.smeta-summary{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.smeta-summary-card{
  background: var(--smeta-surface);
  border: 1px solid var(--smeta-border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--smeta-shadow);
}
.smeta-summary-card.is-total{ background: var(--smeta-primary); border-color: var(--smeta-primary); }
.smeta-summary-num{
  font-family: var(--smeta-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--smeta-text);
  font-variant-numeric: tabular-nums;
}
.smeta-summary-card.is-total .smeta-summary-num{ color: #fff; font-size: 26px; }
.smeta-summary-label{ font-size: 12px; color: var(--smeta-text-muted); margin-top: 4px; }
.smeta-summary-card.is-total .smeta-summary-label{ color: rgba(255,255,255,0.75); }
.smeta-summary-vat{ color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 6px; }

/* ---------- действия ---------- */
.smeta-actions-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.smeta-actions-left{ display: flex; gap: 10px; flex-wrap: wrap; }
.smeta-btn{
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 6px;
  border: 1.5px solid var(--smeta-border-strong);
  background: var(--smeta-surface);
  color: var(--smeta-text-muted);
  cursor: pointer;
}
.smeta-btn:hover{ border-color: var(--smeta-primary); color: var(--smeta-primary); }
.smeta-btn--primary{ background: var(--smeta-primary); border-color: var(--smeta-primary); color: #fff; }
.smeta-btn--primary:hover{ background: var(--smeta-primary-dark); border-color: var(--smeta-primary-dark); color: #fff; }

.smeta-save-hint{ display: flex; align-items: center; gap: 10px; }
.smeta-btn--disabled{
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 6px;
  border: 1.5px dashed var(--smeta-border-strong);
  background: var(--smeta-surface-sunken);
  color: var(--smeta-text-faint);
  cursor: not-allowed;
}
.smeta-save-hint-text{ font-size: 12px; color: var(--smeta-text-faint); max-width: 22ch; line-height: 1.4; }

.smeta-mobile-total-bar{ display: none; }

/* ---------- пикер «Прокат из каталога» ---------- */
.smeta-picker-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(38,51,63,0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.smeta-picker-overlay.is-open{ display: flex; }
.smeta-picker{
  background: var(--smeta-surface);
  border-radius: 12px;
  padding: 22px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.smeta-picker h3{ margin: 0 0 14px; font-size: 17px; }
.smeta-picker label{ display: block; font-size: 12px; color: var(--smeta-text-muted); margin: 12px 0 4px; }
.smeta-picker input{
  width: 100%;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 6px;
  background: var(--smeta-surface);
  color: var(--smeta-text);
}
.smeta-picker-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.smeta-picker-note{ font-size: 12px; color: var(--smeta-text-faint); margin-top: 4px; }

/* Категория/Типоразмер в пикере — тот же выпадающий список, что и в calc1
   лазера (modal.pug, .mater/.thick-out): .dropdown + data-toggle='dropdown' +
   ul.dropdown-menu, открытие/закрытие/клик-вне даёт bootstrap.min.js (уже
   подключён сайтово). Сама визуальная тема — override дефолтных стилей
   Bootstrap (.smeta-csel-list дублирует .dropdown-menu — селектор с двумя
   классами специфичнее, чем одноклассовый bootstrap.css, поэтому override
   срабатывает без !important, тот же приём, что уже использован в проекте
   для .mprod-order-row.mprod-order-row--head, см. raskroy-smeta.md §6.4). */
.smeta-csel{ position: relative; margin-top: 4px; }
.smeta-csel-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 14px;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--smeta-border-strong);
  border-radius: 6px;
  background: var(--smeta-surface);
  color: var(--smeta-text);
  cursor: pointer;
}
.smeta-csel-btn:hover, .smeta-csel.open .smeta-csel-btn{ border-color: var(--smeta-primary); }
.smeta-csel-btn span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smeta-csel-arrow{ width: 13px; height: 13px; flex: 0 0 auto; color: var(--smeta-text-muted); transition: transform .15s; }
.smeta-csel.open .smeta-csel-arrow{ transform: rotate(180deg); }
ul.smeta-csel-list.dropdown-menu{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  width: auto;
  min-width: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--smeta-surface);
  border: 1px solid var(--smeta-border-strong);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(38,51,63,0.18);
  padding: 4px;
  margin: 0;
  font-size: 13.5px;
}
.smeta-csel-list > li > a{
  display: block;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--smeta-text);
  cursor: pointer;
  white-space: normal;
}
.smeta-csel-list > li > a:hover, .smeta-csel-list > li > a:focus{
  background: var(--smeta-primary-soft);
  color: var(--smeta-text);
}
.smeta-csel-list > li > a.is-selected{ background: var(--smeta-primary); color: #fff; }
.smeta-csel-empty{ padding: 8px 10px; color: var(--smeta-text-faint); font-size: 13px; }

@media (max-width: 760px){
  .smeta-add-row-bar{ display: none; }
  .smeta-add-row-mobile{ display: block; }

  .smeta-lines-table thead{ display: none; }
  .smeta-lines-table, .smeta-lines-table tbody{ display: block; width: 100%; }
  /* На десктопе .smeta-lines — одна общая рамка на всю таблицу (строки
     разделены только border-bottom). В мокапе каждая строка — своя
     карточка с отступом от соседних, не общий список сросшихся строк —
     это и была жалоба "между карточками нет расстояния, всё съехало".
     Общую рамку контейнера снимаем, отдаём её каждой паре <tr> (строка +
     доп.строка) — вместе они и образуют одну карточку мокапа. */
  .smeta-lines{ background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .smeta-line-row{
    margin-top: 12px;
    background: var(--smeta-surface);
    border: 1px solid var(--smeta-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    /* box-shadow сознательно не здесь, а только на .smeta-line-detail-row
       ниже — карточка на самом деле состоит из двух <tr>, и тень на ОБОИХ
       сразу давала на шве между ними заметную тёмную линию/градиент (в
       мокапе карточка была одним div'ом, там этого шва физически не было). */
  }
  .smeta-line-row:first-child{ margin-top: 0; }
  .smeta-line-detail-row{
    display: block; /* иначе остаётся table-row (UA-стиль <tr>) — вне табличного
      контекста (table/tbody здесь тоже block) фон/скругления этой "карточки"
      рендерились непредсказуемо, и "Наценка" визуально проваливалась под
      карточку, на серый фон страницы, вместо того чтобы быть её частью */
    background: var(--smeta-surface);
    border: 1px solid var(--smeta-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--smeta-shadow);
  }
  /* CSS Grid вместо flex-wrap+процентов — тот подход не выдержал реальных
     данных: доля колонок то переносила "Сумму" на отдельную строку у
     "Проката", то оставляла пустой разрыв у "Материала" (гулял в
     зависимости от того, что именно в ячейке). Раскладка (и весь мобильный
     вид строки) выверена в отдельном мокапе, согласованном с пользователем
     (артефакт 87522d14-78b9-4c6e-9d29-648db788c465) — три ряда: имя на всю
     ширину, затем "Кол-во" слева и "Цена" справа рядом, затем "Сумма" под
     "Ценой", тоже справа, без подписи "Сумма" (крупная цифра говорит сама
     за себя). Именованные grid-области не зависят от суммарной ширины
     контента — количество хлыстов или единица "услуга" не собьют раскладку,
     как сбивали проценты. */
  .smeta-line-row{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "type  type"
      "name  name"
      "qty   price"
      ".     sum";
    column-gap: 16px;
    row-gap: 10px;
    padding: 14px 44px 14px 14px;
    position: relative;
  }
  .smeta-line-row > td{ display: block; border: none; padding: 0; font-size: 14px; }
  .smeta-line-row > td:nth-child(1){ grid-area: type; }
  .smeta-line-row > td:nth-child(2){ grid-area: name; }
  /* .smeta-num{text-align:right} (правило для десктопной таблицы) наследуется
     и сюда — на инпут это не влияло (он и так занимал всю ширину ячейки),
     а вот подпись "КОЛ-ВО" (::before, блочный текст) утекала вправо вслед
     за этим правилом, зрительно отрываясь от инпута под ней. */
  .smeta-line-row > td:nth-child(3){ grid-area: qty; text-align: left; }
  /* Цена — сама ячейка растёт из грид-колонки на всю её ширину, но внутри
     control (инпут+единица) прижат вправо flex'ом, а подпись "ЦЕНА" —
     явно возвращена к левому краю (align-self: flex-start), иначе она
     наследует то же выравнивание, что и control, и "убегает" вправо вслед
     за ним — ровно то, на что указал пользователь в мокапе. */
  .smeta-line-row > td:nth-child(4){
    grid-area: price;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .smeta-line-row > td:nth-child(4)::before{ align-self: flex-start; }
  .smeta-line-row > td:nth-child(5){ grid-area: sum; text-align: right; }
  .smeta-line-row .smeta-qty-input{ width: 90px; padding: 8px 6px; }
  .smeta-line-row .smeta-price-input{ width: 60px; padding: 8px 6px; }
  .smeta-line-row .smeta-unit-select{ min-width: 0; max-width: 64px; padding: 6px 20px 6px 8px; font-size: 11px; background-position: right 6px center; background-size: 9px; }
  .smeta-line-row .smeta-unit{ min-width: 0; font-size: 11px; padding: 6px 8px; }
  .smeta-line-row .smeta-qty-cell, .smeta-line-row .smeta-price-cell{ gap: 8px; }
  .smeta-line-row > td:nth-child(6){
    position: absolute;
    top: 12px;
    right: 10px;
  }
  .smeta-line-row > td[data-label]:not(.smeta-no-label)::before{
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--smeta-text-muted);
    margin-bottom: 4px;
  }
  /* Сумма — итог строки, и так очевиден по месту (справа, крупно, с ₽) —
     подпись "СУММА" над ним только загромождала карточку. По образцу
     карточки детали в calc1 лазера (.part .price .total/.cur, product.css) —
     крупная цифра + мелкая, спокойная по весу валюта рядом, а не единым
     по размеру текстом.
     ⚠️ specificity: общее правило `td[data-label]:not(.smeta-no-label)::before`
     выше (0,3,2) — простой `td:nth-child(5)::before` (0,2,2) его не перебивал,
     "Сумма" продолжала рендериться несмотря на этот селектор. Добавлен класс
     `.smeta-num` (он и так есть на этой ячейке) — специфичность (0,3,2),
     ничья с общим правилом, а по порядку в файле это правило ниже → побеждает. */
  .smeta-line-row > td:nth-child(5)[data-label].smeta-num::before{ content: none; }
  .smeta-line-row > td:nth-child(5) .smeta-money{
    font-size: 22px;
    line-height: 1;
    color: var(--smeta-primary);
  }
  .smeta-money-cur{ font-size: 13px; font-weight: 600; }
  .smeta-line-detail-row > td{ padding: 0 14px 14px; }
  .smeta-line-detail{ padding-left: 0; } /* десктопный отступ под колонку "Тип" здесь не нужен — карточка на всю ширину */
  .smeta-cut-panel-cols{ flex-direction: column; }

  /* Степень зачистки шва — 2 карточки в ряд вместо горизонтального скролла,
     чтобы все 4 варианта были видны сразу, без "спрятанного" четвёртого. */
  .smeta-finish-options{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
  }
  .smeta-finish-opt{ width: auto; }

  .smeta-summary{ grid-template-columns: 1fr 1fr; margin-bottom: 74px; }
  .smeta-summary-card.is-total{ display: none; } /* дублируется прилипающей плашкой снизу */

  .smeta-actions-row{ flex-direction: column; align-items: stretch; margin-bottom: 60px; }
  .smeta-actions-left{ flex-direction: column; }
  .smeta-save-hint{ flex-direction: column; align-items: stretch; text-align: center; }
  .smeta-btn--disabled{ order: 2; }
  .smeta-save-hint-text{ order: 1; max-width: none; margin-bottom: 4px; }

  .smeta-mobile-total-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--smeta-primary);
    color: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
    z-index: 10;
  }
  .smeta-mobile-total-bar .smeta-mtb-label{ font-size: 12px; color: rgba(255,255,255,0.75); }
  .smeta-mobile-total-bar .smeta-mtb-amount{
    font-family: var(--smeta-mono);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .smeta-mobile-total-bar .smeta-mtb-amount .smeta-mtb-vat{ font-family: inherit; font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.7); margin-left: 6px; }
}