/* Арматура и опалубка — стили. Каркас страниц — Bootstrap 5 (как в «Ремонте»), гамма своя: бетон, арматура, доска. */
:root {
  --bg: #F5F4F1; --paper: #FFFFFF; --ink: #23262B; --muted: #6B6F76; --line: #E2DFD8;
  --accent: #D9531E; --accent-dark: #B34314; --accent-soft: #FCEBDF;
  --con: #CFCBC4; --con-dark: #9C978E; --steel: #7A3E1D; --wood: #C99A5B; --ok: #1F8A4C;
  --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-radius: .6rem;
}
body { background: var(--bg); }
.app-nav { background: var(--paper); border-bottom: 1px solid var(--line); }
.brand-sub { color: var(--muted); font-weight: 400; font-size: .9rem; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.card-soft { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; }
.steps a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fff; font-size: .9rem; }
.steps a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.kpi { display: flex; gap: 18px; flex-wrap: wrap; }
.kpi div { min-width: 110px; }
.kpi b { display: block; font-size: 1.25rem; }
.kpi span { color: var(--muted); font-size: .8rem; }

/* редактор */
.ed-wrap { position: relative; background: #FBFAF8; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ed-svg { width: 100%; height: auto; max-height: 72vh; min-height: 320px; display: block; touch-action: none; user-select: none; }
.ed-adding .ed-svg { cursor: crosshair; }
.ed-grid { stroke: #ECE9E3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ed-strip { fill: var(--con); fill-opacity: .6; stroke: var(--con-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ed-strip.sel { fill: #F4C9B2; stroke: var(--accent); }
.ed-axis { stroke: #555; stroke-width: 1; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.ed-hit { stroke: transparent; cursor: move; }
.ed-node { fill: #fff; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; cursor: grab; }
.ed-node.sel { fill: var(--accent); stroke: var(--accent-dark); }
.ed-ghost { stroke: var(--accent); stroke-opacity: .35; pointer-events: none; }
.ed-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dim line { stroke: #3D4149; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dim .ext { stroke: #9AA0A8; }
.dim text { fill: #23262B; font-family: Arial, sans-serif; }
.ed-dim text { fill: var(--accent-dark); font-weight: 700; }

/* рисунки расчёта */
.fnd-svg { width: 100%; height: auto; max-height: 420px; display: block; }
.fw-board { fill: var(--wood); stroke: var(--wood); stroke-linejoin: miter; }
.fw-con { fill: var(--con); }
.fw-tie { stroke: #444; stroke-width: 30; }
.sec-soil { fill: #E9E1D2; }
.sec-sand { fill: #F3E7C4; }
.sec-board { fill: var(--wood); }
.sec-rib { fill: #B2834A; }
.sec-strut, .sec-stake { stroke: #B2834A; stroke-width: 50; }
.sec-tie { stroke: #444; stroke-width: 14; }
.sec-con { fill: var(--con); stroke: #555; stroke-width: 6; }
.sec-clamp { fill: none; stroke: var(--steel); stroke-width: 8; }
.sec-bar { fill: var(--steel); }
.sec-bar.side { fill: #A0582F; }
.mark line, .mark circle { stroke: #23262B; stroke-width: 4; fill: #fff; }
.mark text { font-family: Arial, sans-serif; }
.dim.small text { fill: #555; }

/* таблицы */
.t-calc { font-size: .9rem; }
.t-calc td, .t-calc th { vertical-align: middle; }
.t-calc input.price { width: 90px; text-align: right; }
.t-calc tr.off td { color: #A5A9AF; text-decoration: line-through; }
.t-calc tr.off td:first-child, .t-calc tr.off td.price-cell { text-decoration: none; }
.t-calc .grp td { background: #F7F5F1; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.total { font-size: 1.4rem; font-weight: 800; }
.chk-error { color: #B42318; } .chk-warn { color: #9A5B00; } .chk-info { color: var(--muted); }

/* 3D */
.f3d-box { height: 60vh; min-height: 340px; background: #F3F1EC; border-radius: 10px; overflow: hidden; }

/* ЖБИ */
.zv { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; cursor: pointer; height: 100%; }
.zv.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.zv .fnd-svg { max-height: 160px; }
.zb-fl { fill: #B9B3A8; stroke: #fff; stroke-width: 20; }
.zb-fbs { fill: #D8D3CA; stroke: #fff; stroke-width: 20; }
.zb-mono { fill: #F2B48F; stroke: #fff; stroke-width: 20; }
.zb-l text { font-family: Arial, sans-serif; fill: #333; }

/* лист */
.sheet-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; overflow: auto; }
.sheet-box svg { width: 100%; height: auto; display: block; }

@media (max-width: 576px) {
  .card-soft { padding: 14px; }
}

/* шапка на телефоне — без горизонтальной прокрутки */
.app-nav .navbar-brand { white-space: normal; margin-right: 0; }