/* Конструктор дома ВКамне: стиль основного сайта (графит, оранжевый, мягкие карточки) */
:root{
  --charcoal:#262322; --charcoal2:#322D2A; --orange:#D9622B; --orange-dark:#B84F20;
  --white:#fff; --card:#F1EEEA; --muted:#6B6560; --muted-light:#C9C2BB; --line:#E2DDD3; --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--charcoal);font-family:Arial,"Helvetica Neue",Helvetica,"Segoe UI","PT Sans",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin:0 0 .4em}
h1{font-size:32px}h2{font-size:24px}h3{font-size:18px}
p{margin:0 0 1em;color:var(--muted)}
a{color:inherit}

.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:8px 18px;padding-top:calc(8px + env(safe-area-inset-top));border-bottom:1px solid #ECE8E2}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-0.02em}
.brand img{height:36px;width:auto}
.top-note{font-size:12.5px;font-weight:700;color:var(--muted)}

main{max-width:760px;margin:0 auto;padding:20px 18px 120px}
.kicker{color:var(--orange);font-weight:800;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px}
.progress{display:flex;gap:5px;margin:2px 0 18px}
.progress i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.progress i.on{background:var(--orange)}
.lead{font-size:16px}

.group{margin:0 0 20px}
.group>.lab{font-weight:800;font-size:14px;margin-bottom:8px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:2px solid transparent;border-radius:14px;padding:14px 16px;cursor:pointer;min-height:58px;position:relative;user-select:none;transition:border-color .12s,background .12s}
.opt input{position:absolute;opacity:0;pointer-events:none}
.box{flex:none;width:26px;height:26px;border:2px solid #B9B1A8;background:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.opt.radio .box{border-radius:50%}
.opt.on{border-color:var(--orange);background:#FBEFE8}
.opt.on .box{background:var(--orange);border-color:var(--orange)}
.opt.on .box::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.opt.radio.on .box::after{width:8px;height:8px;border:0;background:#fff;border-radius:50%;transform:none}
.opt b{display:block;font-size:16px}
.opt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.two{grid-template-columns:1fr 1fr}
@media (max-width:420px){.two{grid-template-columns:1fr}}

.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:14px;padding:10px 14px;margin-bottom:10px}
.stepper span{font-weight:700}
.stepper small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.stepper .ctl{display:flex;align-items:center;gap:6px}
.stepper button{width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:var(--charcoal);font-size:26px;line-height:1;cursor:pointer;font-weight:700;box-shadow:0 0 0 2px #D9D2C8 inset}
.stepper button:active{background:var(--orange);color:#fff}
.stepper output{min-width:38px;text-align:center;font-size:28px;font-weight:800}
.numrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.numrow label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--muted)}
.numrow input{width:100%;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-size:20px;font-weight:700;font-family:inherit;background:#fff}
.numrow input:focus{outline:none;border-color:var(--orange)}
.sect{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}

.nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid #ECE8E2;padding:10px 18px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:15}
.nav .btn{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--orange);color:#fff;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{background:var(--orange-dark)}
.btn.dark{background:var(--charcoal)}
.btn.ghost{background:transparent;color:var(--charcoal);box-shadow:0 0 0 1.5px #DCD6CE inset}
.btn.ghost:hover{background:var(--card)}
.btn:disabled{opacity:.45}
.nav .btn.ghost{flex:0 0 36%}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat{background:var(--charcoal);color:#fff;border-radius:var(--radius);padding:14px 16px}
.stat b{display:block;font-size:28px;color:var(--orange);font-weight:800;line-height:1.05}
.stat span{font-size:12.5px;color:var(--muted-light)}
.tabs{display:flex;gap:6px;margin:18px 0 14px;overflow-x:auto}
.tabs button{flex:1;min-width:72px;border:0;border-radius:999px;background:var(--card);font-family:inherit;font-weight:800;font-size:14px;padding:12px 8px;cursor:pointer;color:var(--charcoal)}
.tabs button.on{background:var(--charcoal);color:#fff}
.panel{display:none}.panel.on{display:block}
.floorsw{display:flex;gap:8px;margin-bottom:10px}
.floorsw button{flex:1;min-height:42px;border:0;border-radius:999px;background:var(--card);font-weight:800;cursor:pointer;font-family:inherit;font-size:14px}
.floorsw button.on{background:var(--orange);color:#fff}
.planbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px;overflow:hidden}
.plan-svg{width:100%;height:auto;display:block}
.legend{font-size:12.5px;color:var(--muted);margin-top:8px}
.rooms{margin-top:12px;font-size:14px}
.rooms ul{list-style:none;margin:0;padding:0}
.rooms li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
#c3d{width:100%;height:340px;display:block;border-radius:var(--radius);background:#DCE3EA;cursor:grab}
.hint3{font-size:13px;color:var(--muted);margin-top:8px}
table.calc{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border-radius:var(--radius);overflow:hidden}
table.calc td{padding:12px 14px;border-bottom:1px solid #E4DFD8;vertical-align:top}
table.calc td:last-child{text-align:right;font-weight:800;white-space:nowrap}
table.calc tr.total td{background:var(--orange);color:#fff;font-size:17px;border:0}
table.calc small{display:block;color:var(--muted);font-weight:400;white-space:normal}
.warn{background:#FFF3E8;border-radius:14px;padding:14px 16px;font-size:13.5px;margin:12px 0;color:#6a4a2e}
.fitok{background:#EAF4E7;border-radius:14px;padding:14px 16px;font-size:14px;margin:12px 0;color:#2F5E26}
.fitbad{background:#FBE9E5;border-radius:14px;padding:14px 16px;font-size:14px;margin:12px 0;color:#8a2c20}
.checklist{list-style:none;margin:0 0 14px;padding:0}
.checklist li{background:var(--card);border-radius:12px;padding:12px 14px 12px 44px;margin-bottom:8px;position:relative;font-size:14px}
.checklist li::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border:2px solid #B9B1A8;border-radius:5px;background:#fff}
.checklist li b{display:block}
form.lead label{display:block;font-weight:800;font-size:13px;margin:14px 0 6px}
form.lead input,form.lead textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:14px;font-size:17px;font-family:inherit;background:#fff}
form.lead input:focus,form.lead textarea:focus{outline:none;border-color:var(--orange)}
form.lead textarea{min-height:110px}
.ok{background:#E6F3E3;border-radius:14px;padding:14px 16px;margin-top:12px;font-weight:700;color:#2F5E26}
.err{background:#FBE4E1;border-radius:14px;padding:14px 16px;margin-top:12px;font-weight:700;color:#8a2c20}
.resbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.resbar .btn{flex:1;min-height:48px}
.fine{font-size:12.5px;color:var(--muted)}
.hero-start{background:var(--charcoal);color:#fff;border-radius:var(--radius);padding:30px 22px 32px;margin:0 0 18px;position:relative;overflow:hidden}
.hero-start::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:var(--orange);opacity:.9}
.hero-start>*{position:relative;z-index:1}
.hero-start h1{font-size:36px;color:#fff}
.hero-start h1 span{color:var(--orange)}
.hero-start p{color:var(--muted-light)}
.hero-start .kicker{color:var(--orange)}

#print-area{display:none}
@media print{
  body{background:#fff;padding:0}
  .top,#app,.nav{display:none!important}
  #print-area{display:block!important}
  #print-area h1{font-size:26px}
  #print-area .pl{page-break-inside:avoid;margin:10px 0}
  #print-area img{max-width:100%}
  @page{margin:12mm}
}

.info{background:#FBEFE8;border-radius:14px;padding:14px 16px;margin:0 0 18px;font-size:14px;color:var(--charcoal)}
.info b{display:block;margin-bottom:4px;color:var(--orange-dark)}
.varbar{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.varbar .btn{min-height:44px;padding:0 18px;font-size:14px}
.varbar span{margin-left:auto;font-size:13px;font-weight:700;color:var(--muted)}

.cat{display:grid;gap:16px}
.cat-card{background:var(--card);border-radius:var(--radius);overflow:hidden}
.cat-plan{background:#fff;padding:8px;border-bottom:1px solid var(--line)}
.cat-plan .plan-svg{max-height:300px}
.cat-body{padding:16px 18px 18px}
.cat-code{font-size:12.5px;font-weight:800;letter-spacing:2px;color:var(--orange)}
.cat-body h3{font-size:22px;margin:2px 0 2px}
.cat-tag{font-weight:700;color:var(--charcoal);margin-bottom:6px}
.cat-facts{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat-facts li{background:#fff;border-radius:12px;padding:8px 6px;text-align:center;font-size:11.5px;color:var(--muted)}
.cat-facts b{display:block;font-size:14px;color:var(--charcoal)}
.cat-price{font-size:22px;font-weight:800;margin:6px 0 12px}
.cat-price small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.cat-btns{display:flex;gap:10px}
.cat-btns .btn{flex:1;min-height:46px;padding:0 12px;font-size:14px}
@media (min-width:700px){.cat{grid-template-columns:1fr 1fr}}

/* ---- 3D: ракурсы ---- */
#c3d{height:420px}
.views3{display:flex;gap:6px;margin-top:10px;overflow-x:auto}
.views3 button{border:0;border-radius:999px;background:var(--card);font-family:inherit;font-weight:800;font-size:13px;padding:10px 14px;cursor:pointer;color:var(--charcoal);white-space:nowrap}
.views3 button.alt{margin-left:auto;background:var(--orange,#D9622B);color:#fff}
/* ---- калькулятор стен ---- */
.c3w{width:100%;height:260px;display:block;border-radius:var(--radius);margin-bottom:14px}
.wres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wres div{background:var(--card);border-radius:14px;padding:12px}
.wres b{display:block;font-size:20px}.wres span{font-size:12px;color:var(--muted)}
.wnote{margin:10px 0 4px;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:700}
.wnote.ok{background:#E4F0DE;color:#2E5A25}.wnote.bad{background:#F8E0D8;color:#8A2E16}
.wopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wopts.four{grid-template-columns:repeat(4,1fr)}
.wopts button,.wfin button{border:2px solid transparent;border-radius:14px;background:var(--card);font-family:inherit;text-align:left;padding:12px;cursor:pointer;color:var(--charcoal)}
.wopts button b,.wfin button b{display:block;font-size:14px}.wopts button small,.wfin button small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.wopts button.on,.wfin button.on{border-color:var(--orange,#D9622B);background:#fff}
.wfin{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wfin i{display:block;width:100%;height:26px;border-radius:8px;margin-bottom:8px;border:1px solid rgba(0,0,0,.1)}
#wreg{width:100%;padding:12px;border-radius:14px;border:1px solid #D9D2C8;font-family:inherit;font-size:15px;background:#fff}
.wtbl{overflow-x:auto}.wtbl table{width:100%;border-collapse:collapse;font-size:13px}
.wtbl th{text-align:left;color:var(--muted);font-weight:700;padding:6px 8px}.wtbl td{padding:8px;border-top:1px solid #E6DFD3;vertical-align:top}
.wtbl td small{display:block;color:var(--muted);font-size:11px}
.wtbl tr[data-fill]{cursor:pointer}.wtbl tr.on td{background:#FBEFE6}
.wtbl td.ok{color:#2E7D32;font-weight:800}.wtbl td.bad{color:#B3261E;font-weight:800}