@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#1b3139;background:#f4f6f6;font-synthesis:none;--foreground:#1b3139;--background:#f4f6f6;--blue:#70a3af}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{accent-color:#0e6c78}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}
.app-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid #dce4e6;gap:24px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:20px;letter-spacing:-.7px}.brand b{font-weight:700}.brand-mark{display:grid;place-items:center;background:#18343c;color:#fff;border-radius:9px;width:38px;height:38px;font-size:24px;font-weight:500}
.app-header nav{display:flex;gap:22px;font-size:13px;color:#78878b}.app-header nav span{display:flex;align-items:center;gap:7px;white-space:nowrap}.app-header nav i{font-style:normal;width:22px;height:22px;border:1px solid #d8e0e2;border-radius:50%;display:grid;place-items:center;font-size:11px}.app-header nav .active{color:#125f6b;font-weight:700}.app-header nav .active i,.app-header nav .done i{background:#176c78;border-color:#176c78;color:white}
#aanbouw-model{display:grid;grid-template-columns:350px minmax(0,1fr);height:calc(100dvh - 78px);min-height:600px;max-width:2000px;margin:auto}
#wizard{padding:28px 24px;background:#fff;border-right:1px solid #dce4e6;overflow:auto;scrollbar-width:thin}#step-heading{margin:0 0 27px;font-size:19px;font-weight:600;letter-spacing:-.5px;line-height:1.35}
.viz-controls{display:grid;gap:21px;margin-bottom:25px}.form-label{display:flex;flex-direction:column;gap:9px;font-size:14px;font-weight:500;line-height:1.5;min-width:0}.form-label>span{color:#0d6978;font-size:16px;font-weight:600}.form-range{width:100%;cursor:ew-resize;margin:0;height:18px}.form-select,.form-control{display:block;width:100%;max-width:100%;padding:11px 12px;border:1px solid #cbd6d9;border-radius:7px;background:#fafcfc;color:#18343c;font-size:15px;min-height:44px}.form-select:hover,.form-control:hover{border-color:#8caaaf}.form-check{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.5}.form-check-input{height:17px;width:17px;margin:0;flex:0 0 auto}
.viz-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;border:1px solid #cddadd;background:#fff;color:#27444c;border-radius:7px;font-size:14px;font-weight:500;transition:background .15s,box-shadow .15s}.btn:hover:not(:disabled){background:#ecf3f4;box-shadow:0 2px 6px #173b4412}.btn-primary{background:#176c78;color:white;border-color:#176c78}.btn-primary:hover:not(:disabled){background:#105865}.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #65aabd;outline-offset:3px}
#wizard>.viz-row{margin:26px 0 8px;justify-content:space-between;padding-top:22px;border-top:1px solid #e3e9eb}#next-step{flex:1}#previous-step{flex:0 0 auto}#previous-step:disabled{display:none}.text-small{font-size:13px;line-height:1.65;color:#526a71}#wizard .text-small{margin:12px 0}#door-width-detail{padding-top:8px}#step-6 .viz-row{display:grid;grid-template-columns:1fr 1fr}#edit-design{grid-column:1/-1}
#scene-panel{position:relative;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#e8eeea}#canvas-box{position:relative;flex:1;min-height:440px}#canvas-box canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}#canvas-box canvas:active{cursor:grabbing}#scene-status{position:absolute;inset:0;display:grid;place-items:center;padding:40px;text-align:center;background:#e8eeea;font-size:16px;z-index:2}#view-toolbar{align-self:center;justify-content:center;gap:6px;background:#ffffffed;padding:8px;border:1px solid #d6e0df;border-radius:12px;box-shadow:0 4px 20px #18383d0d;max-width:calc(100% - 24px);margin:0 12px 12px}#view-toolbar .btn{font-size:12px;min-height:35px;padding:7px 10px}#view-toolbar .form-check{font-size:12px;padding:0 6px}#scene-panel>.text-small{margin:0!important;min-height:38px;padding:6px 20px 12px;justify-content:space-between;font-size:12px;color:#566e6d}
#result-summary{margin-top:20px;border-top:1px solid #dce4e6;padding-top:10px}h3{font-size:16px;font-weight:600}#choice-list{padding-left:18px;font-size:14px;line-height:1.65}#choice-list li{margin-bottom:10px}
@media(min-width:1500px){#aanbouw-model{grid-template-columns:390px minmax(0,1fr)}#wizard{padding:32px}#canvas-box{min-height:560px}}
@media(max-width:1000px){.app-header{padding:0 20px}.app-header nav{gap:12px}.app-header nav span{font-size:0;gap:0}.app-header nav i{font-size:12px}#aanbouw-model{grid-template-columns:310px minmax(0,1fr)}#wizard{padding:22px 18px}#step-heading{font-size:17px}#view-toolbar .btn{padding:7px 8px}}
@media(max-width:700px){.app-header{height:66px;padding:0 16px}.brand{font-size:18px}.brand-mark{width:32px;height:32px;font-size:21px}.app-header nav{gap:6px}#aanbouw-model{height:auto;min-height:0;display:flex;flex-direction:column}#scene-panel{order:0;min-height:380px}#canvas-box{height:330px;min-height:330px;flex:none}#wizard{order:1;border-right:0;padding:22px 20px;overflow:visible}#view-toolbar{margin-bottom:6px;padding:5px}#view-toolbar .btn{min-height:33px;padding:6px 8px;font-size:11px}#scene-panel>.text-small{font-size:11px;justify-content:center}#scene-panel>.text-small>span:last-child{display:none}#step-heading{margin-bottom:20px;font-size:19px}.form-select,.form-control{font-size:16px}.viz-controls{gap:18px}.app-header nav i{height:19px;width:19px}#canvas-box canvas{height:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}