:root{--ink:#123b34;--green:#218068;--green2:#176a57;--mint:#edf6f1;--bg:#f4f7f4;--line:#d8e3dd;--muted:#667d76;--white:#fff;--wood:#c3a06f;--shadow:0 18px 50px rgba(23,68,58,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Arial,Helvetica,sans-serif}.topbar{height:72px;padding:0 max(24px,calc((100vw - 1220px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}button,input,select,textarea{font:inherit;color:inherit}.brand{display:flex;align-items:center;gap:11px;background:0;border:0;padding:0;cursor:pointer}.brand span{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:var(--green);color:#fff;font-weight:900}.topbar p{color:var(--muted);font-weight:700}.ghost,.secondary,.primary{border:0;border-radius:13px;padding:12px 18px;font-weight:800;cursor:pointer}.ghost,.secondary{background:var(--mint);color:var(--green2)}.primary{background:var(--green);color:#fff}.hero{max-width:1220px;margin:auto;padding:58px 24px 34px;display:flex;align-items:end;justify-content:space-between;gap:50px}.hero small{color:var(--green);font-weight:900;letter-spacing:.13em;text-transform:uppercase}.hero h1{font-size:clamp(40px,5.2vw,66px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 0}.hero h1 i{font-style:normal;color:var(--green)}.hero p{max-width:430px;margin:0 0 8px;color:var(--muted);font-size:18px}.steps{max-width:1220px;margin:0 auto 22px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}.steps button{position:relative;border:0;border-top:1px solid var(--line);background:transparent;padding:16px 8px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:#80928c;cursor:pointer}.steps button:before{content:"";position:absolute;left:0;right:100%;top:-2px;height:3px;background:var(--green);transition:.25s}.steps button.active:before,.steps button.done:before{right:0}.steps button b{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#e5ece8;color:#7a9089}.steps button.active,.steps button.done{color:var(--ink)}.steps button.active b,.steps button.done b{background:var(--green);color:#fff}.steps button span{font-weight:900}.steps button small{display:block;font-weight:400;color:var(--muted)}.layout{max-width:1220px;margin:auto;padding:0 24px 100px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:22px;align-items:start}.controls,.preview{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.controls{padding:30px}.step-panel{display:none}.step-panel.active{display:block}.section-title{display:flex;gap:14px;align-items:center;margin-bottom:27px}.section-title>span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint);font-weight:900;color:var(--green)}.section-title h2,.section-title p{margin:0}.section-title p{color:var(--muted)}fieldset{border:0;border-top:1px solid var(--line);padding:24px 0 0;margin:26px 0 0}legend{padding:0 14px 0 0;font-weight:900;font-size:17px}.number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.number-grid label,.select-label,.select-row>label,#upper-controls>label{display:grid;gap:7px;font-weight:800}.number{display:grid;grid-template-columns:38px 1fr 38px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}.number input{width:100%;min-width:0;border:0;text-align:center;font-weight:900;font-size:17px;outline:0}.number button,.counter button{border:0;background:#f0f5f2;cursor:pointer;font-size:20px}.number:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(33,128,104,.12)}.number.compact{grid-template-columns:34px 60px 34px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:44px 1fr;align-items:center;cursor:pointer}.choice input{position:absolute;opacity:0}.choice-icon{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border:2px solid #9aaca6;font-size:20px}.choice b{font-size:17px}.choice small{color:var(--muted)}.choice:has(input:checked){border:2px solid var(--green);padding:17px;background:var(--mint)}.choice:has(input:checked):after{content:"✓";position:absolute;right:14px;top:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.check-grid label,.toggle-line{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}.check-grid input,.toggle-line input{width:18px;height:18px;accent-color:var(--green)}.check-grid span,.toggle-line span{font-weight:800}.check-grid small,.toggle-line small{display:block;color:var(--muted);font-weight:400}.select-label select,.select-row select{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px;background:#fff}.color-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.color-row label{position:relative;display:grid;place-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:10px 4px;cursor:pointer}.color-row input{position:absolute;opacity:0}.color-row i{width:30px;height:30px;border-radius:50%;background:var(--swatch);border:1px solid #ccd6d1}.color-row label:has(input:checked){border-color:var(--green);background:var(--mint)}.select-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-line.wide{margin-top:4px}#upper-controls{margin-top:16px;padding:16px;background:var(--mint);border-radius:14px}.counter-card{display:flex;justify-content:space-between;align-items:center;padding:17px;border:1px solid var(--line);border-radius:16px}.counter-card small{display:block;color:var(--muted)}.counter{display:grid;grid-template-columns:34px 40px 34px;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden}.counter strong{text-align:center}.counter button{height:36px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.presets button,.apply-all{border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px;cursor:pointer;font-weight:800}.tabs{display:flex;gap:8px;overflow:auto;padding:4px 1px 12px}.tabs button{min-width:104px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:10px;text-align:left;cursor:pointer}.tabs button.active{border:2px solid var(--green);padding:9px;background:var(--mint)}.tabs button b,.tabs button small{display:block}.tabs button small{color:var(--muted)}.section-editor,.door-editor{border:1px solid var(--line);border-radius:18px;padding:18px}.editor-head,.door-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}.editor-head h3,.door-summary h3{margin:2px 0}.editor-head small,.door-summary small{color:var(--muted)}.editor-head label{display:grid;gap:5px;font-weight:800}.counter-list>label{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-weight:800}.counter-list small{display:block;color:var(--muted);font-weight:400}.button-options{display:grid;gap:13px;margin-top:16px}.button-options>div{display:grid;grid-template-columns:1fr 110px 110px;gap:6px;align-items:center}.button-options small{font-weight:800}.button-options button{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;cursor:pointer}.button-options button.active{border-color:var(--green);background:var(--mint);color:var(--green2);font-weight:800}.door-tabs button{min-width:140px}.door-summary>b{padding:9px 12px;border-radius:10px;background:var(--mint)}.material-list{display:grid;gap:8px}.material-list label{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:13px;cursor:pointer}.material-list input{position:absolute;opacity:0}.material-list label:has(input:checked){border:2px solid var(--green);padding:12px;background:var(--mint)}.material-list small{color:var(--muted)}.apply-all{width:100%;margin-top:10px;color:var(--green2)}.hinge-grid{margin-top:8px}.hardware-note{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:15px;border-radius:13px;background:var(--mint)}.warnings{display:grid;gap:8px;margin-top:15px}.warning{border-left:4px solid #c6913d;background:#fff7e7;padding:12px;border-radius:9px;color:#76541f}.estimate{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}.estimate>div{display:flex;justify-content:space-between;gap:20px;padding:14px 16px;border-bottom:1px solid var(--line)}.estimate>div:last-child{border:0}.estimate>div span{color:#49665e}.estimate-total{background:var(--green);color:#fff;font-size:18px}.estimate-total span{color:#fff!important}.estimate-warning{display:block!important;background:#fff7e7}.offer{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#f9fbf9}.offer h3,.offer p{margin:0}.offer p{color:var(--muted)}.offer textarea{width:100%;min-height:360px;margin:14px 0;border:1px solid var(--line);border-radius:13px;padding:16px;resize:vertical;background:#fff;line-height:1.55}.offer .primary{width:100%}.preview{position:sticky;top:94px;padding:24px;overflow:hidden}.preview-top{display:flex;justify-content:space-between;align-items:start}.preview-top small{color:var(--muted)}.preview-top h2{margin:3px 0}.preview-top button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 12px;cursor:pointer}.preview-top button.active{background:var(--mint);border-color:var(--green)}.scene{position:relative;height:430px;display:grid;place-items:center;perspective:1000px}.cabinet{--cabinet:#f0f1ed;position:relative;width:min(var(--model-width,370px),88%);height:min(var(--model-height,330px),82%);display:grid;border:10px solid var(--cabinet);background:#f8faf8;box-shadow:18px 22px 34px rgba(26,58,50,.2);transform:rotateY(-5deg);transition:.25s}.cabinet:before{content:"";position:absolute;inset:-10px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.cabinet:after{content:"";position:absolute;top:-10px;right:-29px;width:20px;height:calc(100% + 10px);background:color-mix(in srgb,var(--cabinet),#6b5336 18%);transform:skewY(-42deg);transform-origin:left top;box-shadow:8px 10px 18px rgba(0,0,0,.12)}.cabinet-row{position:relative;display:grid;min-height:0}.cabinet-row.upper{border-bottom:7px solid var(--cabinet)}.cabinet-cell{position:relative;min-width:0;border-right:6px solid var(--cabinet);overflow:hidden;background:linear-gradient(100deg,#f7faf7,#edf1ed)}.cabinet-cell:last-child{border:0}.cabinet-cell.active{box-shadow:inset 0 0 0 3px #72b5a4}.size-tag{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.92);padding:4px 7px;border-radius:7px;box-shadow:0 3px 10px rgba(0,0,0,.12);font-size:11px;font-weight:900;white-space:nowrap}.shelf{position:absolute;left:5%;right:5%;height:5px;background:var(--cabinet);box-shadow:0 3px 4px rgba(0,0,0,.12)}.rail{position:absolute;left:9%;right:9%;height:4px;border-radius:4px;background:#859792;box-shadow:0 2px 4px rgba(0,0,0,.15)}.rail:before,.rail:after{content:"";position:absolute;top:-3px;width:7px;height:10px;border-radius:50%;background:#9aa9a5}.rail:before{left:-2px}.rail:after{right:-2px}.drawers{position:absolute;left:8%;right:8%;bottom:4%;display:grid;border:3px solid var(--cabinet)}.drawers i{height:26px;border-bottom:3px solid var(--cabinet);position:relative}.drawers i:last-child{border:0}.drawers i:after{content:"";position:absolute;top:5px;left:42%;width:16%;height:3px;background:#8e9995;border-radius:3px}.free-tag{position:absolute;left:50%;transform:translate(-50%,-50%);font-size:10px;background:#fff;padding:3px 5px;border-radius:6px;box-shadow:0 2px 7px rgba(0,0,0,.1);white-space:nowrap}.door-cell{position:relative;background:linear-gradient(100deg,var(--door),color-mix(in srgb,var(--door),#88968f 8%));border-right:3px solid rgba(46,70,63,.25);box-shadow:inset 0 0 18px rgba(255,255,255,.55)}.door-cell:last-child{border:0}.door-cell.active{box-shadow:inset 0 0 0 3px #218068,inset 0 0 18px rgba(255,255,255,.55)}.door-cell .handle{position:absolute;top:50%;right:7px;width:3px;height:44px;background:#5b655f;border-radius:4px;box-shadow:1px 2px 3px rgba(0,0,0,.2)}.door-cell:nth-child(even) .handle{right:auto;left:7px}.overall-width{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);border-top:1px solid #879c95;padding:4px 25px;font-weight:900}.overall-height{position:absolute;left:4px;top:50%;transform:translateY(-50%) rotate(-90deg);border-top:1px solid #879c95;padding:4px 25px;font-weight:900}.depth-tag{position:absolute;right:4px;top:18px;color:#537068;font-weight:800}.dimensions-hidden .overall-width,.dimensions-hidden .overall-height,.dimensions-hidden .depth-tag,.dimensions-hidden .size-tag,.dimensions-hidden .free-tag{display:none}.preview-data{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preview-data span{padding:10px;border-radius:11px;background:var(--mint);color:var(--muted);font-size:12px}.preview-data b{display:block;color:var(--ink);font-size:14px}.price-box{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:17px;border-radius:15px;background:var(--ink);color:#fff}.price-box small,.price-box strong{display:block}.price-box strong{font-size:24px}.price-box button{border:0;border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-weight:800;cursor:pointer}.actions{position:fixed;z-index:15;left:50%;bottom:16px;transform:translateX(-50%);width:min(720px,calc(100% - 30px));display:grid;grid-template-columns:130px 1fr 190px;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 14px 45px rgba(18,59,52,.18);backdrop-filter:blur(15px)}.actions span{text-align:center}.actions small,.actions b{display:block}.toast{position:fixed;z-index:30;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:930px){.hero{align-items:start;flex-direction:column;gap:18px}.layout{grid-template-columns:1fr}.preview{position:relative;top:auto;order:-1}.scene{height:370px}.steps button small{display:none}}
@media(max-width:620px){.topbar{height:62px}.topbar p,.topbar .ghost{display:none}.hero{padding-top:38px}.steps{padding:0 12px}.steps button{justify-content:center}.steps button span{display:none}.layout{padding:0 12px 95px}.controls,.preview{border-radius:18px}.controls{padding:18px}.number-grid,.choice-grid,.check-grid,.select-row{grid-template-columns:1fr}.color-row{grid-template-columns:repeat(2,1fr)}.button-options>div{grid-template-columns:1fr 1fr}.button-options small{grid-column:1/-1}.scene{height:320px}.cabinet{max-width:80%}.overall-height{left:-25px}.actions{grid-template-columns:84px 1fr 134px}.actions .secondary,.actions .primary{padding:12px 8px}.actions small{display:none}.price-box{align-items:stretch;flex-direction:column}.price-box button{width:100%}}

/* Clean, proportional front view for the interactive preview. */
.notice-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid #ecd7ac;border-radius:12px;background:#fffaf0}.notice-title small{color:#80663b}.notice-ok{padding:13px 14px;border-radius:12px;background:var(--mint);color:var(--green2);font-weight:800}
.field-hint{margin:-8px 0 13px;color:var(--muted);font-size:13px}.hinge-grid .choice{min-height:92px}.hinge-grid .choice-icon{border-radius:50%;font-size:16px}.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.drawer-actions button{min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--green2);font-weight:800;cursor:pointer}.drawer-actions button:last-child{color:#8a5549}.drawer-actions button:disabled{opacity:.42;cursor:not-allowed}
.scene{height:470px;padding:50px 38px 56px 66px;perspective:none}
.cabinet{width:var(--model-width,370px);height:var(--model-height,350px);max-width:100%;max-height:100%;border-width:8px;box-shadow:0 22px 38px rgba(26,58,50,.16),0 0 0 1px rgba(18,59,52,.12);transform:none;transition:width .25s,height .25s,background .25s}
.cabinet:before{inset:-8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}.cabinet:after{display:none}
.cabinet-row.upper{border-bottom-width:6px}
.cabinet-cell,.door-cell{appearance:none;margin:0;padding:0;border-top:0;border-bottom:0;border-left:0;font:inherit;color:inherit;text-align:initial;cursor:pointer}
.cabinet-cell{border-right-width:5px}.cabinet-cell:last-child,.door-cell:last-child{border-right:0}
.cabinet-cell:focus-visible,.door-cell:focus-visible{outline:3px solid #218068;outline-offset:-4px}
.cabinet-cell.active,.door-cell.active{box-shadow:inset 0 0 0 3px #218068,inset 0 0 18px rgba(255,255,255,.45)}
.size-tag{top:7px;max-width:calc(100% - 8px);min-width:0;padding:4px 6px;line-height:1.05;text-align:center;overflow:hidden;text-overflow:ellipsis}.size-tag b,.size-tag span{display:block}.size-tag span{margin-top:2px;font-size:9px;color:#6b7e78;font-weight:700}
.drawers{left:6%;right:6%;bottom:5%;gap:3px;padding:3px;border:1px solid rgba(40,67,59,.42);border-radius:2px;background:rgba(230,235,231,.78);box-shadow:0 5px 10px rgba(27,52,44,.18)}.drawers i{position:relative;height:29px;border:1px solid rgba(53,78,70,.4)!important;border-radius:1px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(218,225,220,.93));box-shadow:inset 0 -4px 7px rgba(41,62,55,.08),0 1px 2px rgba(20,38,32,.12)}.drawers i:last-child{border:1px solid rgba(53,78,70,.4)!important}.drawers i:after{display:none}.drawer-handle{position:absolute;left:50%;top:7px;width:24%;height:3px;min-width:8px;transform:translateX(-50%);border-radius:3px;background:#768981;box-shadow:0 1px 1px rgba(0,0,0,.18)}.drawer-size{position:absolute;right:3px;bottom:2px;padding:1px 3px;border-radius:3px;background:rgba(255,255,255,.9);color:#5f746d;font-size:7px;font-weight:800;line-height:1.2}
.row-height-tag{position:absolute;z-index:5;left:4px;display:block;padding:3px 5px;border-radius:6px;background:rgba(255,255,255,.94);box-shadow:0 2px 7px rgba(0,0,0,.1);font-size:9px;font-weight:900;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}
.main-row-height{top:50%;transform:translateY(-50%) rotate(180deg)}.main-row-height.with-upper{top:auto;bottom:8px;transform:rotate(180deg)}.upper-row-height{top:5px}
.overall-width{bottom:8px;min-width:180px;text-align:center;white-space:nowrap}.overall-height{left:4px;top:14px;transform:none;border:0;padding:5px 8px;border-radius:7px;background:rgba(239,243,241,.94);box-shadow:0 2px 8px rgba(30,49,42,.08);font-size:13px;line-height:1.2;white-space:nowrap}.depth-tag{right:4px;top:14px;white-space:nowrap}
.dimensions-hidden .row-height-tag{display:none}
@media(min-width:931px){.actions{left:max(calc((100vw - 1220px)/2 + 24px),24px);width:min(570px,calc(50vw - 56px));transform:none}}
@media(max-width:620px){.notice-title{align-items:flex-start;flex-direction:column}.drawer-actions{grid-template-columns:1fr}.scene{height:390px;padding:54px 22px 52px 48px}.cabinet{max-width:100%}.overall-height{left:0;top:14px;font-size:11px}.depth-tag{right:0;font-size:11px}.overall-width{min-width:150px;padding-inline:12px}.size-tag{font-size:9px;padding-inline:3px}.size-tag span{font-size:8px}.drawer-size{display:none}}