/* #369 v10 «Живой конструктор» — стили эталона Креативного, заскоуплены под #v10app. */
#v10app{--acc:#c2410c; --acc-bg:#fff7ed; --sel:#5a7d2a; --sel-bg:#f0f7e6; --ink:#292524; --mut:#78716c; --line:#e7e0d8; --bg:#faf6f1}
#v10app *{box-sizing:border-box; margin:0; padding:0}
#v10app{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:#e8e4de; color:var(--ink); line-height:1.45; font-size:14px}
#v10app .num{font-variant-numeric:tabular-nums}
#v10app .annot{max-width:1240px; margin:22px auto 12px; padding:15px 20px; background:#292524; color:#e7e5e4; border-radius:12px; font-size:13px}
#v10app .annot b{color:#fff}
#v10app .annot .q{color:#fbbf24}
#v10app .page{max-width:1240px; margin:0 auto 10px; background:var(--bg); border-radius:16px; overflow:hidden; box-shadow:0 10px 34px rgba(41,37,36,.16)}
#v10app .hd{display:flex; align-items:center; justify-content:space-between; padding:11px 20px; background:#fff; border-bottom:1px solid var(--line); gap:16px}
#v10app .logo{font-size:20px; font-weight:800}
#v10app .logo span{color:var(--acc)}
#v10app .nav{display:flex; gap:16px; font-size:13px; color:#57534e; flex:1}
#v10app .hbtn{border:1px solid var(--line); background:#fff; border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; color:#57534e}
#v10app .hbtn.acc{background:var(--acc); color:#fff; border-color:var(--acc)}
/* #839: залогиненная кнопка входа = логин пользователя (не CTA), мягкая заливка */
#v10app .hbtn.v10-authed{background:var(--sel-bg,#eef6ee); border-color:var(--sel,#3a7d34); color:var(--sel,#2f6b2a); font-weight:700}
/* #779: шапка гайдов/калькуляторов = шапка главной. Логотип-ссылка (знак ТТ) + кнопки-ссылки.
   brand*-правила перенесены из инлайна preview369, чтобы статические SEO-страницы рендерили тот же логотип. */
#v10app .hd a.hbtn{text-decoration:none; display:inline-flex; align-items:center}
#v10app .hd .logo{display:flex; align-items:center; gap:11px; white-space:nowrap; flex:0 0 auto; text-decoration:none}
#v10app .hd .brandBadge{flex:none; width:38px; height:38px; border-radius:11px; overflow:hidden; box-shadow:0 5px 14px -6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05)}
#v10app .hd .brandBadge svg{width:100%; height:100%; display:block}
#v10app .hd .brandText{display:flex; flex-direction:column; gap:2px; line-height:1}
#v10app .hd .brandWord{display:inline-flex; align-items:baseline; font-family:"Manrope",system-ui,sans-serif; font-weight:800; font-size:22px; letter-spacing:-.02em; color:#17120d}
#v10app .hd .brandWord .ttmark{display:inline-block; height:.9em; width:.72em; vertical-align:-.12em; margin:0 .01em}
#v10app .hd .brandSlogan{font-style:italic; font-weight:600; font-size:11.5px; color:#8a6f57; white-space:nowrap}
@media(max-width:640px){#v10app .hd .brandSlogan{display:none} #v10app .hd .brandWord{font-size:19px} #v10app .hd .brandBadge{width:32px; height:32px}}
#v10app .offer{display:flex; align-items:baseline; gap:14px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap}
#v10app .offer h1{font-size:17px; letter-spacing:-.2px; font-weight:800}
#v10app .offer h1 i{color:var(--acc); font-style:normal}
#v10app .offer .slog{font-size:12.5px; color:var(--mut)}
#v10app .offer .checks{margin-left:auto; display:flex; gap:14px; font-size:12px; color:#57534e}
#v10app .offer .checks span::before{content:"✓ "; color:var(--sel); font-weight:800}
#v10app .techs{display:flex; gap:10px; padding:12px 20px 0; background:var(--bg)}
#v10app .tech{flex:1; background:#fff; border:1.5px solid var(--line); border-bottom:none; border-radius:13px 13px 0 0; padding:10px 16px; cursor:pointer; display:flex; align-items:center; gap:11px}
#v10app .tech .tn{font-weight:800; font-size:13.5px}
#v10app .tech .tp{font-size:15px; font-weight:800; letter-spacing:-.3px; margin-left:auto}
#v10app .tech .ts{font-size:11px; color:var(--mut); display:block}
#v10app .tech.on{border-color:var(--acc); background:var(--acc-bg); position:relative}
#v10app .tech.on::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--acc-bg)}
#v10app .tech.on .tp{color:var(--acc)}
#v10app .totalbar{display:flex; align-items:center; gap:18px; padding:12px 20px; background:#fff; border-top:2px solid var(--acc); border-bottom:1px solid var(--line)}
#v10app .totalbar .cap{font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; display:block}
#v10app .totalbar .tt b{font-size:25px; letter-spacing:-.7px}
#v10app .totalbar .m2{font-size:12.5px; color:var(--mut)}
#v10app .totalbar .rate{font-size:12.5px; color:var(--mut); font-weight:700}
#v10app .delta{font-size:12.5px; font-weight:800; color:#b45309}
#v10app .dist{flex:1; display:flex; height:26px; border-radius:8px; overflow:hidden; max-width:430px}
#v10app .dist i{display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:700; font-style:normal}
#v10app .pin{font-size:12px; color:#57534e; display:flex; align-items:center; gap:6px}
#v10app .pin b{color:var(--sel)}
#v10app .wrap{display:grid; grid-template-columns:1fr 330px; gap:0; align-items:start}
#v10app .stage{background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 0 13px 0; padding:14px 14px 14px}
#v10app .scene{position:relative; border-radius:13px; overflow:hidden; height:588px; border:1px solid var(--line)}
#v10app .scene img{position:absolute; width:1121px; left:-213px; top:-60px}
/* #398: чипы вида (в т.ч. «Фасад» — возврат из режима «План») ДОЛЖНЫ быть выше оверлея
   поэтажного плана (#planEditorWrap z-index:6) и сцен-контролов (z-index:8), иначе «Фасад»
   перекрыт планом и вернуться в 3D нельзя. Поднимаем на z-index:9. */
#v10app .views{position:absolute; left:12px; top:12px; display:flex; gap:7px; z-index:9}
#v10app .vchip{background:rgba(255,255,255,.94); border:1.5px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:700; color:#57534e}
#v10app .vchip.on{border-color:var(--acc); background:var(--acc-bg); color:var(--acc)}
#v10app .badge{position:absolute; z-index:6; background:#fff; border:1.5px solid var(--sel); border-radius:11px; padding:7px 12px; font-size:12.5px; box-shadow:0 6px 18px rgba(60,80,20,.2)}
#v10app .badge b{color:var(--sel)}
#v10app .badge .tail{position:absolute; width:10px; height:10px; background:#fff; border-left:1.5px solid var(--sel); border-bottom:1.5px solid var(--sel); transform:rotate(-45deg); left:28px; bottom:-6px}
#v10app .hintw{position:absolute; z-index:6; background:rgba(41,37,36,.88); color:#f5f5f4; border-radius:10px; padding:6px 11px; font-size:11.5px}
#v10app .scenebar{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--mut)}
#v10app .scenebar b{color:#44403c}
#v10app .scenebar .undo{margin-left:auto; border:1.5px solid var(--line); background:#fff; border-radius:9px; padding:6px 12px; font-size:12px; font-weight:700; color:#57534e}
#v10app .side{background:var(--bg); padding:14px; display:flex; flex-direction:column; gap:12px}
#v10app .card{background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 15px}
#v10app .card .ch{font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; font-weight:700}
#v10app .card .ch small{float:right; text-transform:none; letter-spacing:0; font-weight:600; color:var(--mut)}
/* #395: 7 форм (Прямой/Г/С гаражом/Квадрат/Т/П/Своя) не влезали в один flex-ряд (flex:1 сжимал их
   в нечитаемую полоску). Сетка 4 колонки с переносом — карточки нормального размера в 2 ряда. */
#v10app .shapes{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
#v10app .shape{border:1.5px solid var(--line); border-radius:10px; padding:6px 3px 4px; text-align:center; background:#fff; cursor:pointer}
#v10app .shape svg{display:block; margin:0 auto 2px}
#v10app .shape span{font-size:10px; color:var(--mut)}
#v10app .shape.on{border-color:var(--sel); background:var(--sel-bg)}
#v10app .shape.on span{color:var(--sel); font-weight:800}
#v10app .sl{margin-top:9px}
#v10app .sl .row{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px}
#v10app .track{height:6px; border-radius:4px; background:var(--line); position:relative; cursor:pointer; touch-action:none}
#v10app .track::before{content:""; position:absolute; left:0; right:0; top:-10px; bottom:-10px}
#v10app .fill{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--acc); pointer-events:none}
#v10app .knob{position:absolute; top:50%; transform:translate(-50%,-50%); width:15px; height:15px; border-radius:50%; background:#fff; border:2.5px solid var(--acc); box-shadow:0 1px 4px rgba(0,0,0,.2); pointer-events:none}
#v10app .hrow .hlbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#v10app .seg{display:flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; margin-top:9px}
#v10app .seg div{flex:1; text-align:center; font-size:11.5px; padding:7px 2px; color:var(--mut); background:#fff; border-right:1px solid var(--line); cursor:pointer}
#v10app .seg div:last-child{border-right:none}
#v10app .seg div.on{background:var(--sel); color:#fff; font-weight:800}
/* #395: цоколь-тумблер под сегментом этажности */
#v10app .v10base{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; font-weight:600; color:var(--mut); cursor:pointer; user-select:none}
#v10app .v10base input{accent-color:var(--acc); width:15px; height:15px}
#v10app .v10base.v10dis{opacity:.4; pointer-events:none}
#v10app .roofs{display:grid; grid-template-columns:1fr 1fr; gap:7px}
#v10app .rf{border:1.5px solid var(--line); border-radius:11px; padding:7px 9px 6px; background:#fff; position:relative; cursor:pointer}
#v10app .rf svg{display:block; margin-bottom:3px}
#v10app .rf .nm{font-size:12px; font-weight:800}
#v10app .rf .pr{font-size:11px; color:var(--mut)}
#v10app .rf.on{border-color:var(--sel); background:var(--sel-bg)}
#v10app .rf.on .pr{color:var(--sel); font-weight:800}
#v10app .mat{display:flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:11px; padding:7px 10px; background:#fff; margin-top:7px; cursor:pointer}
#v10app .mat:first-of-type{margin-top:0}
#v10app .dot{width:21px; height:21px; border-radius:7px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#v10app .mat .t{font-size:12.5px; font-weight:700}
#v10app .mat .s{font-size:10.5px; color:var(--mut)}
/* P2.4: живые ₽-дельты на картах крыши/материала (минус=зелёный дешевле, плюс=красный дороже) */
#v10app .rf .pr.up,#v10app .mat .d.up{color:#b91c1c; font-weight:700}
#v10app .rf .pr.dn,#v10app .mat .d.dn{color:var(--sel); font-weight:700}
#v10app .rf .pr.zero,#v10app .mat .d.zero{color:var(--mut)}
#v10app .mat .d{margin-left:auto; font-size:11.5px; color:var(--mut); font-weight:800}
#v10app .mat.on{border-color:var(--sel); background:var(--sel-bg)}
#v10app .mat.on .d{color:var(--sel)}
#v10app .colors{display:flex; gap:8px; align-items:center; margin-top:9px}
#v10app .cw{width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); cursor:pointer}
#v10app .cw.on{outline:2.5px solid var(--sel); outline-offset:2px}
#v10app .colors small{font-size:11px; color:var(--mut)}
#v10app .rowc{display:flex; align-items:center; gap:10px; padding:2px 0}
#v10app .rowc .nm{font-weight:800; font-size:13px; white-space:nowrap}
#v10app .rowc .sum{margin-left:auto; font-size:12px; color:var(--mut); white-space:nowrap}
#v10app .rowc .tw{color:var(--mut); font-size:11px}
#v10app .hist{margin-top:12px; border:1px solid var(--line); border-radius:13px; overflow:hidden}
#v10app .hist .hh{font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; font-weight:700; padding:9px 14px 7px; background:var(--bg)}
#v10app .hrow{display:flex; align-items:center; gap:10px; padding:8px 14px; border-top:1px solid var(--line); font-size:12.5px; background:#fff}
#v10app .hrow .hp{margin-left:auto; font-weight:800}
#v10app .hrow .hp.up{color:#b45309}
#v10app .hrow .hp.dn{color:var(--sel)}
#v10app .hrow .ht{color:var(--mut); font-size:11px; width:86px; text-align:right}
#v10app .hrow .hu{color:var(--acc); font-weight:700; font-size:11.5px; cursor:pointer}
#v10app .hdot{width:8px; height:8px; border-radius:50%; background:var(--acc); flex:none}
#v10app .advice{font-size:12.5px; color:#44403c}
#v10app .advice b{display:block; margin-bottom:4px; font-size:12.5px}
#v10app .advice .sv{color:var(--sel); font-weight:800}
#v10app .abtn{margin-top:8px; font-size:12px; color:var(--acc); font-weight:700; cursor:pointer}
#v10app .pf{margin-top:9px; font-size:11.5px; color:#78716c}
#v10app .pf b{color:var(--sel)}
#v10app .ctacol{display:flex; flex-direction:column; gap:8px}
#v10app .b1{background:var(--acc); color:#fff; border:none; border-radius:11px; padding:12px; font-size:13.5px; font-weight:800; cursor:pointer}
#v10app .b2{border:1.5px solid var(--line); background:#fff; border-radius:11px; padding:11px; font-size:12.5px; font-weight:700; color:#57534e; cursor:pointer}
#v10app .note{font-size:11px; color:var(--mut); text-align:center}
#v10app .seonote{background:#fff; border-top:1px solid var(--line); padding:12px 20px; font-size:12px; color:var(--mut)}
#v10app .co{width:24px; height:24px; border-radius:50%; background:#dc2626; color:#fff; font-size:12.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.3); flex-shrink:0}
#v10app .abs{position:absolute; z-index:9}
#v10app .rel{position:relative}
#v10app .diffbox{max-width:1240px; margin:14px auto 50px; background:#292524; color:#e7e5e4; border-radius:12px; padding:16px 20px; font-size:13px}
#v10app .diffbox b{color:#fff}
#v10app .diffbox .q{color:#fbbf24}

/* ===== Вкладка ② Смета-документ: контейнер живого #bomSection ===== */
#v10app #v10smeta{padding:16px 20px 24px; background:var(--bg)}
#v10app .v10smeta-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
#v10app .v10smeta-back{border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:8px 14px; font-size:13px; font-weight:700; color:#57534e; cursor:pointer}
#v10app .v10smeta-back:hover{border-color:var(--acc); color:var(--acc)}
#v10app .v10smeta-title{font-size:17px; font-weight:800}
#v10app .v10smeta-title small{display:block; font-size:12px; font-weight:600; color:var(--mut)}
#v10app #v10smeta .bom-section{display:block!important; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px}
#v10app #v10smeta .bom-head h2{font-size:16px}

/* М-1: оффер сцены «смета-документ». P2.6 (Креативный): компактная ОДНА строка-заголовок,
   без повторного trust-ряда (он уже в верхней .offer) и сабтекста — «документ первым экраном». */
#v10app .docoffer{background:none; border:none; padding:6px 2px 2px; margin-bottom:8px}
#v10app .docoffer h2{font-size:18px; font-weight:800; letter-spacing:-.3px}
#v10app .docoffer p{display:none}
#v10app .docchecks{display:none}
/* М-2: 4 вкладки технологий (материал стен) */
#v10app .techtabs{display:flex; gap:10px; margin-bottom:14px}
#v10app .techtab{flex:1; min-width:0; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; font-family:inherit; position:relative; transition:border-color .15s}
#v10app .techtab:hover{border-color:var(--acc)}
#v10app .techtab.on{border-color:var(--acc); background:var(--acc-bg)}
#v10app .techtab.on::after{content:""; position:absolute; left:12px; right:12px; bottom:-1.5px; height:3px; background:var(--acc); border-radius:2px}
#v10app .techtab .tt-n{font-weight:800; font-size:14.5px}
#v10app .techtab .tt-s{font-size:11.5px; color:var(--mut); margin-top:1px}
#v10app .techtab .tt-t{font-size:17px; font-weight:800; letter-spacing:-.4px; margin-top:7px}
#v10app .techtab.on .tt-t{color:var(--acc)}
#v10app .techtab .tt-d{font-size:12px; font-weight:700; margin-top:2px}
#v10app .techtab .tt-d.up{color:#b91c1c}
#v10app .techtab .tt-d.dn{color:var(--sel)}
#v10app .techtab .tt-d.cur{color:var(--mut); font-weight:600}
/* М-3: sticky итог-бар документа. P1.2 (Креативный): дубль с конструкторским sticky «Итого по проекту» —
   скрываем этот блок «Итого по смете», единый итог несёт конструкторский totalbar. */
#v10app #v10docbar{display:none}
#v10app .docbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-top:2px solid var(--acc); border-radius:12px; padding:11px 16px; margin-bottom:14px; box-shadow:0 4px 14px rgba(41,37,36,.06)}
#v10app .docbar .dbmain{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
#v10app .docbar .dbcap{font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; width:100%}
#v10app .docbar .dbmain b{font-size:24px; letter-spacing:-.7px}
#v10app .docbar .dbrate{font-size:12.5px; color:var(--mut); font-weight:700}
#v10app .docbar .dbm2{font-size:12.5px; color:var(--mut)}
#v10app .docbar .dist{max-width:430px}
/* М-4: 5 разделов документа */
#v10app .v10doc{display:flex; flex-direction:column; gap:9px; margin-top:4px}
#v10app .docsec{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
#v10app .docsec-head{width:100%; display:flex; align-items:center; gap:12px; padding:13px 15px; background:#fff; border:none; cursor:pointer; text-align:left; font-family:inherit}
#v10app .docsec-head:hover{background:var(--acc-bg)}
#v10app .docsec .ds-n{width:23px; height:23px; flex:none; border-radius:50%; background:var(--acc-bg); color:var(--acc); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center}
#v10app .docsec .ds-name{font-weight:800; font-size:14.5px}
#v10app .docsec .ds-meta{font-size:11.5px; color:var(--mut)}
#v10app .docsec .ds-sum{margin-left:auto; font-weight:800; font-size:15px}
#v10app .docsec .ds-pct{font-size:11.5px; color:var(--mut); width:38px; text-align:right}
#v10app .docsec .ds-arw{font-size:12px; color:var(--mut); transition:transform .18s}
#v10app .docsec.open .ds-arw{transform:rotate(180deg)}
#v10app .docsec-body{display:none; padding:0 12px 12px; border-top:1px solid var(--line)}
#v10app .docsec.open .docsec-body{display:block}
#v10app .docsec-body .bom-section-acc{margin-top:10px}
/* М-5: строки документа кликабельны → штатный picker реальных вариантов каталога; hover-аффорданс «изменить» */
#v10app .docsec-body .bom-row:not(.bom-colhead){cursor:pointer; position:relative}
#v10app .docsec-body .bom-row:not(.bom-colhead):hover{background:var(--acc-bg)}
#v10app .docsec-body .bom-row:not(.bom-colhead):hover::after{content:"изменить ›"; position:absolute; right:10px; top:50%; transform:translateY(-50%); background:var(--acc); color:#fff; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.15)}
/* 2-колоночная раскладка документа: смета слева, правая колонка (спутник/советчик/выходы) */
#v10app .docgrid{display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start}
#v10app .docmain{min-width:0}
#v10app .docaside{display:flex; flex-direction:column; gap:12px; position:sticky; top:70px}
/* М-6: карточка «ВАШ ДОМ» */
#v10app .satcard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px}
#v10app .sat-title{font-size:12.5px; font-weight:800; color:#44403c; letter-spacing:.2px}
#v10app .sat-view{margin:10px 0; height:150px; background:linear-gradient(#eef3f7,#e3ebf1); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center}
#v10app .sat-open{width:100%; border:1.5px solid var(--acc); background:#fff; color:var(--acc); border-radius:10px; padding:10px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit}
#v10app .sat-open:hover{background:var(--acc-bg)}
/* М-7: карточка ИИ-сметчика (заглушка) */
#v10app .advcard{background:#faf5ff; border:1px solid #e9d8fd; border-radius:14px; padding:14px}
#v10app .advcard .ch{font-weight:800; font-size:13px}
#v10app .advcard .advice{font-size:12px; color:#6b5a45; margin-top:6px}
#v10app .advcard .advice b{display:block; color:#44403c; margin-bottom:3px}
/* М-5: inline-раскрытие строки → 3 карты выбора */
#v10app .docpick{background:#faf7f2; border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:0 0 10px 10px; padding:12px 14px; margin:0 2px 8px}
#v10app .docpick .dp-load{font-size:12.5px; color:var(--mut)}
#v10app .docpick .dp-title{font-size:12.5px; font-weight:800; color:#44403c; margin-bottom:9px}
#v10app .dp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
#v10app .dp-card{text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:10px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:5px; min-width:0}
#v10app .dp-card:hover{border-color:var(--acc)}
#v10app .dp-card.on{border-color:var(--sel); background:var(--sel-bg)}
#v10app .dp-card .dp-lab{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--mut)}
#v10app .dp-card.on .dp-lab{color:var(--sel)}
#v10app .dp-card .dp-lab b{color:var(--sel)}
#v10app .dp-thumb{width:100%; height:52px; object-fit:cover; border-radius:6px}
#v10app .dp-chip{width:100%; height:52px; border-radius:6px; background:linear-gradient(135deg,#d8cfc2,#b8ab99)}
#v10app .dp-card .dp-nm{font-size:12px; font-weight:600; color:#44403c; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
#v10app .dp-card .dp-price{font-size:14px; font-weight:800}
#v10app .dp-card .dp-price .dp-u{font-size:10px; font-weight:500; color:var(--mut)}
#v10app .dp-card .dp-delta{font-size:11.5px; font-weight:700}
#v10app .dp-card .dp-delta.up{color:#b91c1c}
#v10app .dp-card .dp-delta.dn{color:var(--sel)}
#v10app .dp-card .dp-delta.zero{color:var(--mut)}
#v10app .dp-all{margin-top:10px; background:none; border:none; color:var(--acc); font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; padding:2px}
#v10app .dp-all:hover{text-decoration:underline}
/* #836: каталог позиции сметы горизонтальной лентой (замена Эконом/Стандарт/Премиум) */
#v10app .dp-carowrap{position:relative; display:flex; align-items:center; gap:4px}
#v10app .dp-carousel{display:flex; gap:9px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; padding:2px 2px 8px; flex:1 1 auto; scrollbar-width:thin; scroll-snap-type:x proximity}
#v10app .dp-carousel .dp-card{flex:0 0 calc((100% - 18px)/3); min-width:0; scroll-snap-align:start}
#v10app .dp-carousel .dp-card .dp-lab{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--mut)}
#v10app .dp-carousel .dp-card.on .dp-lab{color:var(--sel)}
#v10app .dp-arrow{flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:#44403c; font-size:16px; line-height:1; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; user-select:none}
#v10app .dp-arrow:hover{border-color:var(--acc); color:var(--acc)}
/* #836v2: фото товара в карточке ленты (как .ph в каталоге узла) */
#v10app .dp-card .dp-ph{width:100%; height:78px; border-radius:8px; background:linear-gradient(135deg,#e8e0d4,#d8ccba); display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden; flex:none}
#v10app .dp-card .dp-ph img{width:100%; height:100%; object-fit:cover}
@media(max-width:560px){ #v10app .dp-carousel .dp-card{flex-basis:calc((100% - 9px)/2)} }
/* #836v4: лёгкий маркер «пересчитываю…» на ленте, пока летит асинхронный серверный пересчёт (карточка уже подсвечена мгновенно) */
#v10app .docpick.dp-recalc .dp-carousel{opacity:.72; transition:opacity .12s}
#v10app .docpick.dp-recalc .dp-title::after{content:' • пересчитываю…'; color:var(--acc); font-weight:700}
/* М-8: три выхода */
#v10app .docexits{display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:0}
#v10app .docaside .dxbtn{width:100%; text-align:center}
#v10app .dxbtn{border:1.5px solid var(--line); background:#fff; border-radius:11px; padding:12px 18px; font-size:14px; font-weight:700; color:#44403c; cursor:pointer; font-family:inherit}
#v10app .dxbtn:hover{border-color:var(--acc); color:var(--acc)}
#v10app .dxbtn.primary{background:var(--acc); color:#fff; border-color:var(--acc); font-size:15px}
#v10app .dxbtn.primary:hover{color:#fff; filter:brightness(1.05)}
#v10app .dxnote{flex-basis:100%; font-size:12px; color:var(--mut); margin-top:2px}

/* ===== В-8: мобильная раскладка (<760px) — сцена сверху, панель снизу ===== */
@media (max-width:760px){
  /* М390-1: body — flex-контейнер, #v10app flex-элемент с min-width:auto не сжимался ниже
     min-content содержимого (576px) при вьюпорте 390. min-width:0 → flex-элемент ужимается
     до вьюпорта; max-width/overflow гасят остаточный горизонт-перелив. */
  #v10app{margin:0 auto; font-size:13.5px; min-width:0; width:100%; max-width:100vw; overflow-x:hidden}
  #v10app .page{border-radius:0; margin:0; min-width:0; max-width:100%; overflow-x:hidden}
  #v10app .wrap,#v10app .stage,#v10app .side,#v10app .totalbar,#v10app .techs,#v10app .hd,#v10app .offer,#v10app #v10smeta{min-width:0; max-width:100%}
  #v10app .techtabs{overflow-x:auto; -webkit-overflow-scrolling:touch}
  #v10app .techtab{min-width:150px; flex:0 0 auto}
  #v10app .docgrid{grid-template-columns:1fr}
  #v10app .docaside{position:static}
  #v10app .hd{padding:9px 13px; gap:8px; flex-wrap:wrap}
  #v10app .hd .nav{display:none}
  #v10app .hd .logo{font-size:18px}
  #v10app .hbtn{padding:6px 10px; font-size:12px}
  #v10app .offer{padding:9px 13px; gap:6px}
  #v10app .offer h1{font-size:15px}
  #v10app .offer .checks{margin-left:0; flex-basis:100%; gap:12px; flex-wrap:wrap}
  #v10app .techs{padding:10px 12px 0; gap:6px; overflow-x:auto}
  #v10app .tech{padding:8px 11px; min-width:180px}
  #v10app .tech .ts{display:none}
  #v10app .totalbar{flex-wrap:wrap; gap:9px; padding:10px 13px}
  #v10app .totalbar .tt{flex:1 1 100%}
  #v10app .totalbar .tt b{font-size:22px}
  #v10app .dist{max-width:none; flex:1 1 100%; height:22px}
  #v10app .wrap{grid-template-columns:1fr}
  #v10app .stage{border-right:none; border-radius:0; padding:10px}
  #v10app .scene{height:64vw; min-height:300px; max-height:440px}
  /* М390-2: канвас 3D не ужимался под мобильную высоту. Виновник — #houseScene с min-height ~506px
     (десктоп-аспект). Ужимаем обёртку + #houseScene + канвас к контейнеру 300; JS шлёт resize → рендерер пересчитает. */
  #v10app #v10scene #houseSceneWrap,#v10app #v10scene #houseScene,#v10app #v10scene .house-scene{height:100%!important; min-height:0!important; max-height:100%!important; width:100%!important}
  #v10app #v10scene canvas{width:100%!important; height:100%!important; display:block}
  #v10app .views{left:8px; top:8px; gap:5px; flex-wrap:wrap; max-width:calc(100% - 16px)}
  #v10app .vchip{padding:5px 10px; font-size:11px}
  #v10app .badge{left:12px!important; right:12px; max-width:none}
  #v10app .side{padding:10px; gap:10px}
  #v10app .card{padding:11px 13px}
  #v10app .scenebar{flex-wrap:wrap; font-size:11px}
  #v10app .hist .ht{width:auto}
  #v10app .knob{width:19px; height:19px}
  #v10app .track{height:8px}
}