.cs-sash-builder{--green:#177a3d;--green2:#1f9d55;--lime:#d9ee35;--orange:#f28c28;--ink:#163323;--cream:#fffdf5;--line:#dfe7d9;--muted:#66756b;--sash-color:#123A9B;--border-color:#D4AF37;max-width:1450px;margin:20px auto;padding:20px;background:linear-gradient(135deg,#f7fff2,#fff9ee);border:1px solid #dbe8cf;border-radius:24px;box-shadow:0 20px 55px rgba(26,77,42,.12);font-family:Inter,Arial,sans-serif;color:var(--ink);box-sizing:border-box}.cs-sash-builder *{box-sizing:border-box}.cs-sash-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:8px 4px 18px}.cs-eyebrow{font-size:12px;font-weight:900;letter-spacing:2.5px;color:var(--green)}.cs-sash-head h2{margin:4px 0;font-size:34px;line-height:1.05;color:#193b25}.cs-sash-head p{margin:8px 0 0;max-width:720px;color:var(--muted);font-size:14px}.cs-design-code{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;min-width:225px}.cs-design-code small{display:block;color:#7a8a7f;font-size:10px;font-weight:800;letter-spacing:1.5px}.cs-design-code strong{display:block;margin-top:4px;font-size:12px;color:var(--green);word-break:break-word}.cs-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:18px}.cs-progress button{border:1px solid #d9e4d6;background:#fff;border-radius:13px;padding:9px 8px;display:flex;align-items:center;gap:8px;color:#748077;cursor:pointer}.cs-progress button b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#edf3e9;color:#617164;font-size:12px}.cs-progress button span{font-size:12px;font-weight:800}.cs-progress button.is-active{border-color:var(--green);background:#f3fff0;color:var(--green)}.cs-progress button.is-active b{background:var(--green);color:#fff}.cs-layout{display:grid;grid-template-columns:minmax(430px,560px) minmax(420px,1fr);gap:20px;align-items:start}.cs-controls{background:rgba(255,255,255,.84);border:1px solid #dfe9db;border-radius:18px;padding:16px}.cs-step-panel{display:none}.cs-step-panel.is-active{display:block}.cs-step-heading{display:flex;gap:11px;align-items:center;margin:2px 0 15px}.cs-step-heading>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--orange));color:#fff;display:grid;place-items:center;font-weight:900}.cs-step-heading small{font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--green)}.cs-step-heading h3{margin:1px 0 0;font-size:22px}.cs-recommend{width:100%;display:flex;gap:12px;text-align:left;border:2px solid #cce48a;background:linear-gradient(100deg,#f4ffd6,#fff8e7);border-radius:15px;padding:12px;margin-bottom:14px;cursor:pointer}.cs-recommend>span{font-size:25px}.cs-recommend strong{display:block;font-size:14px;color:#244d26}.cs-recommend small{display:block;color:#69755f;margin-top:3px}.cs-style-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.cs-style-card{min-height:76px;border:1px solid #dfe7d9;background:#fff;border-radius:13px;padding:11px;text-align:left;cursor:pointer;transition:.15s}.cs-style-card strong{display:block;color:#254d31}.cs-style-card small{display:block;margin-top:5px;color:#718074}.cs-style-card.is-active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(242,140,40,.12);background:#fffaf1}.cs-divider{height:1px;background:#e6ece2;margin:17px 0}.cs-controls h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:14px 0 9px;color:#52705a}.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cs-option{border:1px solid #dbe5d9;background:#fff;border-radius:10px;padding:9px 5px;cursor:pointer;min-height:52px}.cs-option-code{display:block;font-size:9px;color:#87958a;font-weight:800}.cs-option strong{display:block;font-size:11px;color:#294a32;margin-top:3px}.cs-option.is-active{background:#f0ffe8;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.cs-helper,.cs-small-note{font-size:11px;line-height:1.45;color:#748177;margin:8px 0}.cs-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.cs-color{border:1px solid #dce5d8;background:#fff;border-radius:10px;padding:7px 4px 6px;cursor:pointer;min-width:0}.cs-color span{display:block;width:30px;height:30px;margin:0 auto 4px;border-radius:50%;background:var(--swatch);border:2px solid rgba(0,0,0,.08);box-shadow:0 2px 5px rgba(0,0,0,.12)}.cs-color em{display:block;font-style:normal;font-size:9px;font-weight:700;color:#536158;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-color.is-active{border-color:var(--green);background:#f3fff0;box-shadow:inset 0 0 0 1px var(--green)}.cs-color-row{display:flex;gap:10px}.cs-border-colors .cs-color{flex:1}.cs-border-colors .cs-color span{width:34px;height:24px;border-radius:6px}.cs-popular{margin-top:17px;padding:12px;background:#fffaf0;border:1px dashed #e7c277;border-radius:13px}.cs-popular strong{font-size:12px;color:#80500d}.cs-popular>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.cs-popular button{border:1px solid #edd39d;background:#fff;border-radius:20px;padding:7px 10px;font-size:10px;font-weight:800;color:#6e531d;cursor:pointer}.cs-nav-row{display:flex;justify-content:space-between;gap:8px;margin-top:17px}.cs-btn{border:0;border-radius:11px;padding:11px 14px;font-weight:900;cursor:pointer;background:#eef2ed;color:#31513a}.cs-btn.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 6px 14px rgba(23,122,61,.2)}.cs-btn.secondary{background:#fff;border:1px solid #d9e3d7}.cs-btn.mini{padding:8px 10px;font-size:11px}.cs-personalize-note{background:#f4fff0;border-left:4px solid var(--lime);padding:10px 12px;border-radius:8px;font-size:11px;line-height:1.5;color:#5f6f61;margin-bottom:11px}.cs-side-editor{border:1px solid #dfe8dc;border-radius:15px;padding:13px;background:#fff;margin-bottom:12px}.cs-side-title{display:flex;align-items:center;gap:7px;margin-bottom:8px}.cs-side-title strong{font-size:12px}.cs-side-dot{width:9px;height:9px;border-radius:50%;background:var(--green)}.cs-side-dot.orange{background:var(--orange)}.cs-side-hint{margin-left:auto;font-size:9px;color:#849188;background:#f1f5ef;border-radius:20px;padding:4px 7px}.cs-design-tip{font-size:10px;color:#758078;margin-bottom:10px}.cs-field{display:block;font-size:10px;font-weight:800;color:#5e6b61;margin:8px 0}.cs-field input,.cs-field select,.cs-modal input,.cs-modal textarea{width:100%;margin-top:5px;border:1px solid #d8e2d5;border-radius:9px;padding:9px;background:#fff;font:inherit;color:#243b2a}.cs-inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cs-field input[type=range]{padding:0;accent-color:var(--green)}.cs-field input[type=color]{height:37px;padding:3px}.cs-field output{float:right;font-size:9px;color:#758078;margin-top:-24px;margin-right:8px}.cs-editor-actions{display:flex;gap:8px;align-items:center;margin-top:8px}.cs-upload{display:inline-block;border:1px solid #d8e2d5;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;color:#31513a;background:#fff;cursor:pointer}.cs-upload input{display:none}.cs-object-list{margin-top:10px;display:grid;gap:5px}.cs-object-item{display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid #e3e9df;border-radius:8px;background:#fafcf9}.cs-object-item.is-selected{border-color:var(--orange);background:#fff9ee}.cs-object-item .obj-name{flex:1;font-size:10px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-object-item button{border:0;background:#e9f0e6;border-radius:6px;padding:5px 7px;font-size:9px;cursor:pointer}.cs-selection-tools{display:flex;gap:6px;align-items:center;margin-top:8px;padding:8px;background:#f5f8f3;border-radius:8px}.cs-selection-tools strong{font-size:10px;margin-right:auto}.cs-selection-tools button{border:1px solid #d5dfd2;background:#fff;border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}.cs-check{display:flex;gap:7px;align-items:center;font-size:11px;font-weight:800;margin-top:12px}.cs-ready{display:flex;gap:10px;padding:13px;background:#f4fff0;border:1px solid #d9efbd;border-radius:13px}.cs-ready>span{font-size:24px}.cs-ready strong{font-size:13px}.cs-ready p{font-size:11px;color:#68756c;margin:3px 0 0}.cs-summary-side{margin-top:13px}.cs-secondary-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.cs-preview-wrap{position:sticky;top:20px;background:#fff;border:1px solid #dfe7d9;border-radius:18px;padding:13px}.cs-preview-top{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 9px;font-size:10px;font-weight:900;letter-spacing:1px;color:#58705e}.cs-preview-hint{letter-spacing:0;color:#a16a1d}.cs-stage{min-height:700px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#fffdf7,#f0f7ed);border-radius:14px;border:1px solid #e6ece1;overflow:hidden}.cs-sash-canvas{width:min(100%,620px);touch-action:none;user-select:none}.cs-sash-svg{display:block;width:100%;height:auto;max-height:720px}.cs-canvas-help{text-align:center;margin:-10px 0 7px;font-size:10px;color:#7d897f}.cs-canvas-help span{color:var(--orange);font-size:15px}.cs-design-object{cursor:grab}.cs-design-object:active{cursor:grabbing}.cs-object-hit{fill:transparent;pointer-events:all}.cs-object-box{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:5 4;pointer-events:none}.cs-preview-tip{font-size:10px;color:#6d7b70;padding:8px 3px}.cs-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:5px}.cs-summary>div{background:#f7faf5;border-radius:9px;padding:8px}.cs-summary span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#89948c}.cs-summary strong{display:block;font-size:10px;margin-top:3px;color:#2e5138}.cs-modal{position:fixed;inset:0;background:rgba(15,36,20,.58);display:grid;place-items:center;padding:20px;z-index:99999}.cs-modal[hidden]{display:none}.cs-modal-box{width:min(520px,100%);background:#fffdf8;border-radius:18px;padding:22px;position:relative;box-shadow:0 25px 70px rgba(0,0,0,.3)}.cs-modal-box h3{margin:0 0 5px;font-size:24px}.cs-modal-box p{margin:0 0 15px;color:#69766c;font-size:12px}.cs-modal form{display:grid;gap:9px}.cs-modal textarea{resize:vertical}.cs-modal-close{position:absolute;right:12px;top:10px;border:0;background:#eef2ec;border-radius:50%;width:30px;height:30px;font-size:20px;cursor:pointer}.cs-form-status{font-size:11px;color:var(--green);min-height:18px}
@media(max-width:1000px){.cs-layout{grid-template-columns:1fr}.cs-preview-wrap{position:static}.cs-stage{min-height:560px}.cs-sash-head{flex-direction:column}.cs-design-code{width:100%}}@media(max-width:650px){.cs-sash-builder{padding:10px;border-radius:15px}.cs-sash-head h2{font-size:28px}.cs-progress{grid-template-columns:repeat(5,minmax(70px,1fr));overflow:auto}.cs-progress button{flex-direction:column;min-width:75px}.cs-progress button span{font-size:9px}.cs-grid{grid-template-columns:repeat(2,1fr)}.cs-colors{grid-template-columns:repeat(4,1fr)}.cs-summary{grid-template-columns:repeat(2,1fr)}.cs-inline-fields{grid-template-columns:1fr}.cs-stage{min-height:440px}.cs-sash-canvas{width:95%}.cs-nav-row{flex-direction:column}.cs-nav-row .cs-btn{width:100%}}
/* v4 production-ready preview/editor refinements */
.cs-stage{min-height:800px}
.cs-sash-canvas{width:min(100%,760px);margin:0 auto}
.cs-sash-svg{width:100%;max-height:none}
.cs-preview-tip strong{color:#315c39}
.cs-object-box{stroke-width:2.5}
.cs-canvas-help{background:#fff;border:1px solid #e0e8dc;border-radius:20px;padding:6px 10px;width:max-content;max-width:95%;margin:8px auto 10px}
@media(max-width:1000px){.cs-stage{min-height:680px}.cs-sash-canvas{width:min(100%,700px)}}
@media(max-width:650px){.cs-stage{min-height:500px}.cs-sash-canvas{width:100%}
.cs-resize-handle{fill:#fff;stroke:var(--orange);stroke-width:2;pointer-events:all;cursor:nwse-resize}.cs-resize-handle.handle-ne,.cs-resize-handle.handle-sw{cursor:nesw-resize}.cs-rotate-handle{fill:var(--orange);stroke:#fff;stroke-width:2;pointer-events:all;cursor:grab}.cs-rotate-line{stroke:var(--orange);stroke-width:1.5;pointer-events:none}.cs-design-object{touch-action:none}