
  .ver { font-size: 12px; color: #888; }
  /* ===== адаптивная сетка: параметры | эскиз | цена =====
     ≥1500px — три колонки; 1000–1499px — две (параметры | эскиз+цена стопкой);
     <1000px — одна колонка (мобильный). */
  .grid { display: grid;
          grid-template-columns: minmax(300px, 30%) minmax(480px, 1fr) minmax(300px, 24%);
          gap: 14px; align-items: start; }
  @media (max-width: 1499px) {
    .grid { grid-template-columns: minmax(280px, 34%) 1fr; }
    .grid .card:nth-child(1) { grid-column: 1; grid-row: 1; }
    .grid .card:nth-child(2) { grid-column: 2; grid-row: 1; }
    .grid .card:nth-child(3) { grid-column: 2; grid-row: 2; }
  }
  @media (max-width: 999px) {
    .grid { grid-template-columns: 1fr; }
    .grid .card:nth-child(1),
    .grid .card:nth-child(2),
    .grid .card:nth-child(3) { grid-column: auto; grid-row: auto; }
  }
  .card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .card h2 { font-size: 15px; color: #1F4E78; border-bottom: 2px solid #1F4E78;
             padding-bottom: 5px; margin-bottom: 10px; }
  .rowCalc { display: flex; align-items: center; margin-bottom: 7px; gap: 8px; }
  .rowCalc label { flex: 0 0 128px; font-size: 12.5px; color: #333; }
  .rowCalc input, .row select { flex: 1; padding: 5px 7px; border: 1px solid #c9d4e0;
                            border-radius: 6px; font-size: 13px; background: #FFF2CC; min-width: 0; }
  .hint { font-size: 11px; color: #999; }
  .segtable { width: 100%; border-collapse: collapse; font-size: 12px; }
  .segtable th, .segtable td { border: 1px solid #d5dde6; padding: 3px 4px; }
  .segtable input, .segtable select { width: 100%; padding: 2px 4px; border: 1px solid #c9d4e0;
                                      border-radius: 4px; font-size: 12px; }
  /* ширина колонок: R внутр — чуть уже, Угол — соответственно шире */
  .segtable th:nth-child(4), .segtable td:nth-child(4) { width: 84px; }
  .segtable th:nth-child(5), .segtable td:nth-child(5) { width: 112px; }
  .btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .btns button { padding: 6px 10px; border: none; border-radius: 6px; font-size: 12px;
                 cursor: pointer; background: #2E6DA4; color: #fff; }
  .btns button.sec { background: #fff; color: #1F4E78; border: 1px solid #2E6DA4; }
  .btns button.del { background: #c00000; }
  .btns button:hover { opacity: .9; }
  /* ===== цены (из калькулятора) ===== */
  .result { position: sticky; top: 12px; }
  .price-box { background: #C6EFCE; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; text-align: center; }
  .price-box .lbl { font-size: 12.5px; color: #333; }
  .price-box .val { font-size: 22px; font-weight: 700; color: #1F4E78; }
  .total-box { background: #1F4E78; color: #fff; border-radius: 10px; padding: 14px; margin-bottom: 10px; text-align: center; }
  .total-box .lbl { font-size: 13px; }
  .total-box .val { font-size: 26px; font-weight: 700; }
  .mgr-box { background: #FFF2CC; border-radius: 8px; padding: 10px 14px; margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .mgr-box b { color: #1F4E78; }
  .rec-box { background: #E8F1FA; border: 1px solid #bcd4e8; border-radius: 8px;
             padding: 10px 14px; margin-top: 10px; font-size: 12.5px; line-height: 1.7; }
  .rec-box b { color: #1F4E78; }
  .rec-box button { margin-top: 8px; padding: 6px 12px; border: none; border-radius: 6px;
                    background: #1F4E78; color: #fff; font-size: 12.5px; cursor: pointer; }
  .detail { background: #fff; border-radius: 8px; padding: 10px 14px; margin-top: 10px;
            font-size: 12.5px; line-height: 1.65; border: 1px dashed #c9d4e0; }
  .detail b { color: #1F4E78; }
  table.prices { border-collapse: collapse; font-size: 11px; width: 100%; }
  table.prices th, table.prices td { border: 1px solid #d5dde6; padding: 2px 3px; }
  table.prices th { background: #eef3f8; }
  table.prices input { width: 44px; font-size: 11px; padding: 1px 2px; border: 1px solid #c9d4e0; }
  .hw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
  .hw-row input { flex: 0 0 auto; }
  .hw-row .p { margin-left: auto; font-size: 12px; color: #555; white-space: nowrap; }
  .client-hide { display: none; }
  /* режим клиента: скрыть менеджерские блоки */
  body.client-mode .mgr { display: none !important; }
  body.client-mode #prodRow { display: none !important; }
  body.client-mode #priceMask { display: none !important; }
  body.client-mode #lenRow, body.client-mode #formRow { display: none !important; }
  body.client-mode #raz { display: none !important; }
  .warn { background: #FFC7CE; color: #8a0000; border-radius: 8px; padding: 8px 12px;
          margin-top: 8px; font-size: 12.5px; font-weight: 600; display: none; }
  .ok { background: #DFF2E3; color: #1d6b2f; border: 1px solid #bcdcc4; border-radius: 8px;
        padding: 8px 12px; margin-top: 8px; font-size: 12.5px; font-weight: 600; display: none; }
  /* значок вопроса с подсказкой при наведении */
  .qmark { position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px; border-radius:50%; background:#2E6DA4; color:#fff; font-size:10.5px;
    font-weight:700; margin-left:6px; vertical-align:1px; cursor:help; user-select:none; flex:0 0 auto; }
  .qmark::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
    width:240px; margin-left:-120px; background:#26313c; color:#fff; font-size:12px; line-height:1.5;
    text-align:left; font-weight:400; padding:8px 11px; border-radius:8px; opacity:0; pointer-events:none;
    transition:opacity .12s ease; z-index:2000; box-shadow:0 4px 14px rgba(0,0,0,.28); }
  .qmark:hover::after { opacity:1; }
  @media (max-width:560px) { .qmark::after { width:200px; margin-left:-100px; } }
  .svg-box { border: 1px solid #c9d4e0; border-radius: 8px; background: #fff;
             padding: 8px; overflow: auto; }
  .svg-box svg { display: block; }
  .legend { font-size: 12px; line-height: 1.6; margin-bottom: 6px; }
  .legend b { color: #1F4E78; }
  .zoombar { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
  .zoombar button { padding: 4px 10px; border: 1px solid #c9d4e0; border-radius: 6px;
                    background: #fff; color: #1F4E78; font-size: 13px; cursor: pointer; }
  .zoombar .lbl { font-size: 11px; color: #888; margin-left: 6px; }
  .mark { margin-top: 10px; font-size: 15px; font-weight: 700; color: #1F4E78; }
  .mark input { width: 100%; font-size: 15px; font-weight: 700; color: #1F4E78; padding: 5px 8px;
                border: 1px solid #c9d4e0; border-radius: 6px; }
  .raz { font-size: 12px; line-height: 1.6; margin-top: 6px; background: #f2f7fb;
         border-left: 3px solid #1F4E78; padding: 6px 10px; }
  .raz b { color: #1F4E78; }
  table.param { border-collapse: collapse; font-size: 12px; margin-top: 8px; }
  table.param td { border: 1px solid #d5dde6; padding: 3px 8px; }
  table.param td:first-child { background: #eef3f8; font-weight: 600; white-space: nowrap; }
  footer { margin-top: 12px; font-size: 12px; color: #888; display: flex; gap: 10px; align-items: center; }
  footer button { padding: 5px 10px; font-size: 12px; border: 1px solid #c9d4e0; border-radius: 6px;
                  background: #fff; color: #1F4E78; cursor: pointer; }
  .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none;
                align-items: flex-start; justify-content: center; padding: 40px 12px;
                overflow: auto; z-index: 50; }
  .modal-mask.open { display: flex; }
  .modal { background: #fff; border-radius: 10px; max-width: 760px; width: 100%; padding: 18px; }
  .modal h2 { font-size: 16px; color: #1F4E78; margin-bottom: 10px; }
  .modal .close { float: right; border: none; background: #eee; border-radius: 6px;
                  font-size: 14px; padding: 4px 10px; cursor: pointer; }
  .hist { font-size: 12.5px; line-height: 1.7; }
  /* ===== адаптивность мелких экранов ===== */
  @media (max-width: 1499px) and (min-width: 1000px) {
    .wrap { max-width: 1200px; }
  }
  @media (max-width: 700px) {
    body { padding: 8px; }
    .wrap { max-width: 100%; }
    header { gap: 8px; }
    h1 { font-size: 16px; }
    .card { padding: 10px; border-radius: 8px; }
    /* метки и поля в столбик на узких экранах */
    .row { flex-wrap: wrap; }
    .row label { flex: 0 0 100%; font-size: 12px; }
    .row input, .row select { flex: 1 1 100%; font-size: 14px; padding: 7px 8px; }
    .hint { margin-left: 0 !important; }
    .btns button { flex: 1 1 auto; padding: 8px 6px; font-size: 12px; }
    /* таблица сегментов — горизонтальный скролл вместо сжатия */
    .segtable-wrap { overflow-x: auto; }
    /* эскиз: SVG масштабируется по ширине */
    .svg-box { overflow: auto; -webkit-overflow-scrolling: touch; }
    .svg-box svg { max-width: 100%; height: auto; }
    .svg-box { overflow-x: auto; overflow-y: hidden; }
    /* цена/итог крупнее для чтения на телефоне */
    .price-box .val { font-size: 20px; }
    .total-box .val { font-size: 22px; }
    .zoombar { flex-wrap: wrap; }
    .zoombar .lbl { flex: 1 1 100%; margin: 2px 0 0; }
    footer { flex-wrap: wrap; }
    .mark input { font-size: 13px; }
    table.param { width: 100%; }
    table.param td { padding: 3px 5px; word-break: break-word; }
    table.segtable input, table.segtable select { min-width: 0; }
  }
  @media print {
    body { background: #fff; padding: 0; }
    .no-print-calc { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .grid { grid-template-columns: 1fr; }
    .svg-box { border: none; padding: 0; overflow: visible; }
    .svg-box svg { width: 100% !important; height: auto !important; }
    /* печать «предложения»: при активном режиме печати остаётся только документ */
    body.print-mode .wrap { display: none !important; }
    body.print-mode #printDoc { display: block !important; }
  }
  #printDoc { display: none; }
  .print-h { font-size:20px; font-weight:800; color:#1F4E78; margin-bottom:2px; }
  .print-sub { font-size:12px; color:#6b7681; margin-bottom:10px; }
  .print-sect { margin:12px 0 4px; font-weight:700; font-size:14px; color:#1F4E78;
                border-bottom:1px solid #c9d4e0; padding-bottom:3px; }
  .print-line { font-size:12.5px; margin:4px 0; }
  .print-img { text-align:center; margin-top:6px; }
  .print-img svg { max-width:100%; height:auto; }
  .print-price { background:#eef6ff; border:1px dashed #9db8cf; border-radius:8px; padding:10px 14px;
                 margin-top:8px; font-size:14px; line-height:1.7; }
  .print-price b { color:#1F4E78; }