:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100%;height:100vh;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(max-width:900px){body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:auto}#root{height:auto;min-height:auto;overflow:visible}}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.configurator-panel .top-actions{display:flex;gap:.75rem;padding:.75rem 1rem .25rem;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--ok-border-grey)}.configurator-panel .top-actions .generate-button{flex:1 1 auto}.configurator-panel .top-actions .clear-button{flex:0 0 auto}.configurator-panel .steps{position:sticky;top:56px;z-index:9}:root{--ok-green: #295b52;--ok-dark-grey: #333;--ok-medium-grey: #6c757d;--ok-light-grey: #f8f9fa;--ok-border-grey: #dee2e6;--font-heading: "Montserrat", sans-serif;--font-body: "Lato", sans-serif}body{margin:0;font-family:var(--font-body);color:var(--ok-dark-grey);background-color:#f4f4f4}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{background-color:#fff;border-bottom:1px solid var(--ok-border-grey);justify-content:center;position:relative}.app-header h1{font-family:var(--font-heading);font-size:1.5rem;color:var(--ok-green);margin:0;font-weight:600}.main-content{flex-grow:1;display:flex;justify-content:stretch;align-items:stretch;padding:0;overflow:hidden}.sidebar-left{width:380px;min-width:340px;max-width:420px;height:100%;overflow-y:auto;background-color:#fff;border-right:1px solid var(--ok-border-grey)}.canvas-area{position:relative;flex:1 1 0;padding:0;overflow:hidden;background-color:#fff;height:calc(100vh - 60px)}.canvas-container{width:100%;height:100%;min-height:400px;background-color:#fff}.canvas-fullscreen-btn{position:absolute;top:8px;right:12px;z-index:2100;background:#ffffffeb;border:1px solid #ccc;border-radius:6px;padding:6px;cursor:pointer;color:#333;box-shadow:0 1px 4px #0000001f;display:flex;align-items:center;justify-content:center;transition:background .15s}.canvas-fullscreen-btn:hover{background:#e8e8e8}.canvas-area.canvas-fullscreen{position:fixed;inset:0;width:100%;height:100%!important;max-height:none!important;min-height:0!important;z-index:9999;border:none}@media(max-width:900px){.canvas-container{min-height:0}}.view-toggle{position:absolute;top:12px;left:16px;z-index:9999;display:flex;gap:0;border-radius:6px;overflow:visible;border:1px solid var(--ok-border-grey);box-shadow:0 2px 8px #0000002e;pointer-events:auto}.view-toggle button{padding:6px 14px;border:none;background:#fff;color:var(--ok-dark-grey);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s;font-family:var(--font-body)}.view-toggle button:not(:last-child){border-right:1px solid var(--ok-border-grey)}.view-toggle button:hover{background:#f0f0f0}.view-toggle button.active{background:var(--ok-green);color:#fff}.configurator-footer{display:none}.steps{display:flex;background-color:var(--ok-light-grey);border-bottom:1px solid var(--ok-border-grey)}.steps button{flex-grow:1;padding:1rem;border:none;border-right:1px solid var(--ok-border-grey);background-color:transparent;cursor:pointer;font-family:var(--font-heading);font-weight:600;color:var(--ok-medium-grey);text-transform:uppercase;font-size:.8rem;transition:all .2s ease-in-out}.steps button:last-child{border-right:none}.steps button.step-active{background-color:var(--ok-green);color:#fff}.steps button:disabled{color:#bbb;cursor:not-allowed}.controls{padding:1.5rem 2rem;display:flex;gap:3rem;flex-wrap:wrap}.control-section h4{font-family:var(--font-heading);color:var(--ok-green);margin-top:0;margin-bottom:1rem;text-transform:uppercase;font-size:.9rem;letter-spacing:.5px;border-bottom:2px solid var(--ok-light-grey);padding-bottom:.5rem}.dimension-inputs{display:flex;gap:1.5rem;flex-wrap:wrap}.input-group{display:flex;flex-direction:column;gap:.25rem}.input-group label{font-size:.85rem;color:var(--ok-medium-grey);font-weight:700}input[type=number],select{padding:.5rem .75rem;border-radius:6px;border:1px solid var(--ok-border-grey);font-family:var(--font-body);font-size:1rem;min-width:150px;transition:border-color .2s,box-shadow .2s}input[type=number]:focus,select:focus{outline:none;border-color:var(--ok-green);box-shadow:0 0 0 3px #295b5226}.shape-selector{display:flex;gap:1rem}.shape-icon{width:60px;height:60px;border:2px solid var(--ok-border-grey);border-radius:6px;cursor:pointer;padding:8px;box-sizing:border-box;transition:all .2s ease-in-out;background-color:#fff}.shape-icon:hover{border-color:var(--ok-medium-grey);background-color:var(--ok-light-grey)}.shape-icon.active{border-color:var(--ok-green);border-width:3px;padding:7px;box-shadow:0 0 0 3px #295b5226}.shape-icon svg{width:100%;height:100%}.shape-icon svg path{fill:none;stroke:var(--ok-medium-grey);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.shape-icon.active svg path{stroke:var(--ok-green);stroke-width:3}.shape-selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:10px}.shape-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border:2px solid var(--ok-border-grey);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;font-family:var(--font-body)}.shape-card:hover{border-color:var(--ok-green);background:#f0f7f5}.shape-card-active{border-color:var(--ok-green)!important;background:#e8f5f0!important;box-shadow:0 0 0 2px #295b5226}.shape-card-icon{width:100%;height:48px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;border-radius:6px}.shape-card-icon svg{width:36px;height:36px}.shape-card-icon svg path{fill:none;stroke:var(--ok-medium-grey);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.shape-card-active .shape-card-icon svg path{stroke:var(--ok-green);stroke-width:3}.shape-card-label{font-size:11px;font-weight:600;color:var(--ok-dark-grey);text-align:center;line-height:1.3}.shape-card-rotate{border-style:dashed;border-color:var(--ok-border-grey)}.shape-card-rotate:hover{border-color:var(--ok-green);border-style:dashed}.shape-card-rotate .shape-card-icon svg path{fill:var(--ok-medium-grey);stroke:none}.shape-card-rotate:hover .shape-card-icon svg path{fill:var(--ok-green)}.direction-selector{display:flex;border:1px solid var(--ok-border-grey);border-radius:6px;overflow:hidden}.direction-selector button{flex-grow:1;background-color:#fff;border:none;padding:.75rem;cursor:pointer;font-family:var(--font-body);font-weight:700;color:var(--ok-medium-grey);transition:background-color .2s}.direction-selector button:first-child{border-right:1px solid var(--ok-border-grey)}.direction-selector button.active{background-color:var(--ok-green);color:#fff}.generation-controls{display:flex;gap:1rem}.generate-button,.clear-button{border:none;padding:.75rem 1.5rem;border-radius:6px;font-family:var(--font-heading);font-weight:600;cursor:pointer;transition:background-color .2s}.generate-button{background-color:var(--ok-green);color:#fff}.generate-button:hover{background-color:#1e423a}.clear-button{background-color:var(--ok-medium-grey);color:#fff}.clear-button:hover{background-color:#5a6268}.control-section.large{flex-grow:1;min-width:300px}.pillar-list{list-style-type:none;padding:0;margin:0;max-height:120px;overflow-y:auto;border:1px solid var(--ok-border-grey);border-radius:6px}.pillar-list li{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-bottom:1px solid var(--ok-border-grey);font-size:.9rem}.pillar-list li:last-child{border-bottom:none}.delete-button{background-color:transparent;border:1px solid #ddd;color:#c82333;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.8rem}.form-controls-container{display:flex;gap:16px;width:100%}.form-controls-main{flex-grow:1;display:flex;flex-direction:column;gap:16px}.form-controls-sidebar{min-width:200px}.loading-overlay{position:absolute;inset:0;background-color:#00000080;color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.5rem;z-index:1000}.optimization-result{margin-top:1rem;padding:1rem;background-color:#f0f8ff;border-left:4px solid #4a90e2}.optimization-result h4{margin-top:0;color:#333}.optimization-result p{margin:.5rem 0}.error-text{color:#d9534f;font-weight:700}.info-text{font-size:.8rem;color:#666;margin-top:.5rem}.input-with-unit{position:relative}.input-with-unit input{width:100%;font-size:14px;padding:8px 36px 8px 10px;box-sizing:border-box;border:1px solid var(--ok-border-grey);border-radius:4px}.input-with-unit input::placeholder{color:#bbb}.input-unit-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#aaa;font-size:13px;pointer-events:none}.optimize-row{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}.optimize-actions{min-width:260px}.optimize-side{display:flex;gap:1.5rem;align-items:stretch;flex:1 1 auto;min-width:420px}.pillar-panel{flex:1 1 480px;max-width:560px}.result-panel{flex:0 1 360px;min-width:320px;max-width:420px}.public-panel .public-panel-header{padding:14px 16px 10px;background:var(--ok-green);border-bottom:1px solid var(--ok-border-grey)}.public-panel .public-panel-title{margin:0;font-family:var(--font-heading);font-size:16px;font-weight:700;color:#fff;letter-spacing:.3px}.public-panel .accordion-container{padding:0}.inquiry-overlay{position:fixed;inset:0;z-index:10000;background:#00000080;display:flex;align-items:center;justify-content:center;padding:16px}.inquiry-modal{background:#fff;border-radius:12px;padding:24px;width:100%;max-width:480px;max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:0 8px 40px #00000040;position:relative}.inquiry-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:4px 8px;border-radius:4px}.inquiry-close:hover{background:#f0f0f0;color:#333}.inquiry-label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:#444;margin-bottom:10px}.inquiry-input{padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:16px;font-weight:400;width:100%;box-sizing:border-box;font-family:inherit;background:#fff;color:#1f2933}.inquiry-input:focus{outline:none;border-color:#295b52;box-shadow:0 0 0 2px #295b5226}.inquiry-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}@media(max-width:500px){.inquiry-form-grid{grid-template-columns:1fr}.inquiry-modal{padding:18px 16px;border-radius:10px}}.accordion-section{border-bottom:1px solid var(--ok-border-grey);scroll-margin-top:0}@media(max-width:900px){.accordion-section{scroll-margin-top:45dvh}}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;background:#fff;border:none;cursor:pointer;font-family:var(--font-body);font-size:14px;transition:background .15s}.accordion-header:hover{background:#f5f8f7}.accordion-open .accordion-header{background:#f0f7f5;border-bottom:1px solid #d4e5e0}.accordion-header-left{display:flex;align-items:center;gap:10px}.accordion-step-badge{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ok-border-grey);color:var(--ok-medium-grey);font-weight:700;font-size:13px;flex-shrink:0;transition:background .2s,color .2s}.accordion-open .accordion-step-badge,.badge-complete{background:var(--ok-green);color:#fff}.accordion-title{font-weight:600;color:var(--ok-dark-grey)}.accordion-chevron{color:var(--ok-medium-grey);transition:transform .2s;flex-shrink:0}.chevron-open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .3s ease}.accordion-body-open{max-height:2000px;transition:max-height .4s ease}.accordion-body-inner{padding:8px 16px 16px}.image-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.image-option-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border:2px solid var(--ok-border-grey);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;font-family:var(--font-body);position:relative}.image-option-card:hover:not(.image-option-disabled){border-color:var(--ok-green);background:#f0f7f5}.image-option-selected{border-color:var(--ok-green)!important;border-width:3px!important;background:#dff0ea!important;box-shadow:0 0 0 3px #295b522e}.image-option-selected .image-option-placeholder{background:#d2ebe2}.image-option-selected .image-option-label{color:var(--ok-green)}.image-option-disabled{opacity:.45;cursor:not-allowed}.image-option-placeholder{width:100%;height:56px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;border-radius:6px}.image-option-label{font-size:12px;font-weight:600;color:var(--ok-dark-grey);text-align:center;line-height:1.3}.image-option-sublabel{font-size:10px;color:var(--ok-medium-grey);margin-top:-4px}.public-build-actions{display:flex;gap:8px;padding:16px;border-top:2px solid var(--ok-border-grey);background:#fff;position:sticky;bottom:0;z-index:10;flex-wrap:wrap}.build-main-btn{flex:1 1 auto;padding:12px 20px!important;font-size:15px!important;font-weight:700!important}.build-fewer-btn{flex:0 0 auto;background:#e3f2fd!important;color:#1565c0!important;border:1px solid #90caf9!important}@media(max-width:900px){.app-container{height:auto;min-height:100vh;min-height:100dvh}.app-header{padding:8px 12px}.app-header h1{font-size:1.1rem}.app-container{height:auto;min-height:auto;overflow:visible}.main-content{flex-direction:column;overflow:visible;flex-grow:0;flex-shrink:0;height:auto}.canvas-area{width:100%;height:45vh;height:45dvh;min-height:260px;max-height:400px;flex:none;order:1;position:sticky;top:0;z-index:100;border-bottom:2px solid var(--ok-green)}.sidebar-left{width:100%;min-width:0;max-width:100%;height:auto;overflow-y:visible;border-right:none;order:2}.view-toggle{top:6px;left:6px}.view-toggle button{padding:4px 8px;font-size:.65rem}.canvas-area>div[style*="bottom: 12"]{bottom:6px!important;right:6px!important;font-size:12px!important;padding:4px 8px!important}.public-panel .public-panel-header{padding:10px 14px 8px}.public-panel .public-panel-title{font-size:14px}.accordion-header{padding:10px 14px}.accordion-body-inner{padding:6px 14px 14px}.image-option-grid{gap:8px}.image-option-card{padding:8px 6px}.image-option-placeholder{height:48px}.public-build-actions{position:fixed;bottom:0;left:0;right:0;z-index:200;padding:10px 14px;box-shadow:0 -2px 12px #00000026;border-top:2px solid var(--ok-green)}.sidebar-left .public-panel{padding-bottom:160px}.inquiry-btn-wrapper{position:fixed;bottom:0;left:0;right:0;z-index:200;padding:10px 14px;background:#fff;box-shadow:0 -2px 12px #00000026}input[type=number],select{min-width:0;width:100%}.dimension-inputs{gap:.75rem}.input-group{width:100%}.shape-selector-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.canvas-area{height:38vh;height:38dvh;min-height:220px;max-height:320px}.view-toggle button{padding:3px 5px;font-size:.58rem}.app-header h1{font-size:.95rem}.accordion-step-badge{width:22px;height:22px;font-size:11px}.build-main-btn{padding:10px 14px!important;font-size:13px!important}}