.box-builder{padding:96px 0;background:#e6ebe3;color:#172b22}
.box-builder .box-intro{max-width:770px;margin-bottom:32px}
.box-builder h2{font-size:clamp(36px,5vw,62px);line-height:1.15;margin:8px 0 13px}
.box-builder .box-intro p{color:#4d5d52;font-size:17px;line-height:1.85}
.box-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(315px,.85fr);gap:24px;align-items:start}
.box-viewer{position:sticky;top:105px;padding:15px;background:#f5f3e9;border:1px solid #cad5ca;border-radius:25px;box-shadow:0 22px 65px #1b402319;min-width:0}
.box-viewer canvas{display:block;width:100%;height:430px;border-radius:18px;background:radial-gradient(circle at 50% 43%,#eff8ef 0,#d3dfd2 76%,#c8d8cb 100%);cursor:grab;touch-action:none;outline-offset:4px}
.box-viewer canvas.is-dragging{cursor:grabbing}
.box-viewer p{margin:11px 7px 2px;color:#485d4f;font-size:14px}
.box-viewer strong{display:block;margin:12px 7px 2px;color:#193d2d;font-size:17px}
.box-price-card{margin:15px 4px 3px;padding:18px 20px;border:1px solid #b8ccb6;border-radius:17px;background:linear-gradient(125deg,#e8f3e6,#f8fbef);color:#193d2d}
.box-price-card span{display:block;font-size:14px;font-weight:800}
.box-price-card output{display:block;margin:4px 0;font-size:clamp(28px,4vw,38px);font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums}
.box-price-card small{display:block;color:#3e5a49;font-size:13px}
.box-price-card p{margin:9px 0 0;font-size:12px;line-height:1.6;color:#516450}
.box-controls{padding:26px;background:#fff;border:1px solid #d1d9cf;border-radius:24px;box-shadow:0 16px 45px #1835240e}
.box-controls h3{margin:0 0 16px;font-size:25px;line-height:1.4}
.box-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.box-controls label:not(.box-toggle){display:flex;flex-direction:column;gap:5px;min-width:0;font-size:14px;font-weight:700}
.box-controls input[type=number],.box-controls select{font:inherit;width:100%;height:47px;padding:5px 12px;border:1px solid #b9c7bc;border-radius:9px;background:#fcfdfb;color:#1b3325}
.box-controls input[type=number]{direction:ltr;text-align:left}
.box-controls select{cursor:pointer}
.box-controls input:focus-visible,.box-controls select:focus-visible,.box-controls button:focus-visible,.box-viewer canvas:focus-visible{outline:3px solid #ac803d;outline-offset:2px}
.box-controls .box-group-label{margin:20px 0 10px;font-size:16px;font-weight:800;color:#345843}
.box-toggle{display:flex;align-items:center;gap:10px;margin:19px 0 4px;font-size:16px;font-weight:800;cursor:pointer}
.box-toggle input{width:20px;height:20px;accent-color:#26483c}
.box-controls [hidden]{display:none!important}
.box-controls .box-actions{display:grid;gap:10px;margin-top:20px}
.box-controls .box-actions button{width:100%;justify-content:center;cursor:pointer;font-family:inherit;font-size:16px}
.box-controls .box-secondary{border:1px solid #a0b7a7;background:#f0f5ef;color:#26483c}
.box-controls .box-secondary:hover{background:#dfeadf}
.box-controls .box-note,.box-controls .box-status{font-size:13px;color:#536454;line-height:1.7;margin:13px 0 0}
.box-controls .box-status{min-height:22px;color:#a0352d;font-weight:700}
@media(max-width:850px){.box-layout{grid-template-columns:1fr}.box-viewer{position:static}.box-viewer canvas{height:370px}}
@media(max-width:450px){.box-builder{padding:65px 0}.box-controls{padding:18px}.box-viewer{padding:9px}.box-viewer canvas{height:300px}.box-field-grid{gap:9px}.box-controls input[type=number],.box-controls select{height:44px}}