*{box-sizing:border-box;margin:0}
html,body{width:1280px;height:826px;overflow:hidden}
body{font:400 13px/1.4 system-ui,"Segoe UI",Roboto,Arial,sans-serif;color:#111827;background:#f0fdf4;position:relative}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px #0000000f}
.card h2{font-size:14px;font-weight:600}
.ghost-btn{border:1px solid #e5e7eb;background:#fff;border-radius:7px;padding:6px 11px;font-size:11.5px;box-shadow:0 1px 2px #0000000d;white-space:nowrap}
.ghost-btn.big{padding:9px 16px;font-size:12.5px}
.cta{border:0;border-radius:8px;background:linear-gradient(90deg,#22c55e,#16a34a);color:#fff;font-weight:600;padding:9px 16px;font-size:12px;transition:transform .15s,box-shadow .2s}
.cta.out{background:#fff;color:#15803d;border:1.5px solid #16a34a}
.cta.wide{width:100%}
.cta:disabled{background:#86efac;opacity:.85}
.hit{transform:scale(.95)!important;box-shadow:0 0 0 4px #22c55e40!important}

/* scenes */
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s,transform .45s;transform:translateY(10px)}
.scene.on{opacity:1;visibility:visible;transform:none}
.pane{position:absolute;left:24px;right:16px;top:64px;bottom:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s,transform .4s;transform:translateX(18px)}
.pane.on{opacity:1;visibility:visible;transform:none}

/* dashboard */
#s-dashboard{display:grid;grid-template-columns:186px 1fr;background:#f0fdf4}
.side{background:linear-gradient(180deg,#2f8a3b,#1f6b2c);color:#e8f5e9;padding:12px 10px;display:flex;flex-direction:column;gap:1px;font-size:10.5px;overflow:hidden}
.side .logo{background:#fff;border-radius:8px;padding:5px 8px;margin-bottom:10px;width:fit-content}.side .logo img{height:26px;display:block}
.side b{font-size:8.5px;letter-spacing:.12em;opacity:.7;margin:9px 0 3px 6px}
.side a{padding:5px 8px;border-radius:6px;transition:background .2s}.side a.on{background:#ffffff26;font-weight:600}.side a.hl{background:#ffffff40}
.dash{padding:12px 26px;overflow:hidden}
.dash-top{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.search{margin-right:auto;width:330px;border:1px solid #e5e7eb;background:#fff;border-radius:20px;padding:7px 14px;color:#9ca3af;font-size:11.5px}
.chip{border:1px solid #d1fae5;background:#fff;border-radius:14px;padding:4px 10px;font-size:10.5px}
.avatar{width:28px;height:28px;border-radius:50%;background:#111827;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
.me{display:flex;flex-direction:column;font-size:11px;line-height:1.2}.me small{color:#6b7280}
.hello{font-size:20px;font-weight:700;color:#1f2937;margin-top:6px}.name{font-size:34px;font-weight:800;color:#1e293b;line-height:1.1}
.qa{display:flex;align-items:center;gap:14px;padding:14px 22px;margin:14px 0;border-radius:22px}
.qa-title{width:170px;display:flex;flex-direction:column;gap:6px}.qa-title b{font-size:17px}.qa-title small{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:10.5px}.qa-title img{width:24px}
.qa-btn{width:104px;height:96px;border:1px solid #f0f0f0;background:#fff;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:600;transition:transform .15s,box-shadow .2s}
.qa-btn img{width:52px;height:52px}.qa-btn.big{border:2px solid #dcfce7;box-shadow:0 4px 14px #16a34a1f}
.dash-grid{display:grid;grid-template-columns:170px 1fr 270px;grid-template-rows:232px 232px;gap:14px}
.dash-grid .card{border-radius:18px;padding:12px 14px;overflow:hidden}
.leads{grid-row:1/3;display:flex;flex-direction:column;gap:9px}.leads>b{font-size:12.5px}
.lead{border:1px solid #f1f5f9;border-radius:12px;padding:8px;display:grid;grid-template-columns:1fr auto;gap:2px;font-size:10px}
.lead i{font-style:normal;background:#fff7ed;color:#ea580c;border-radius:8px;padding:0 6px;width:fit-content;font-size:9px}.lead span{color:#9ca3af;font-size:9px}
.lead b{grid-column:1/-1;text-align:center;font-size:12.5px}.lead small{grid-column:1/-1;text-align:center;color:#6b7280;font-size:8.5px}
.row-h{display:flex;justify-content:space-between;align-items:center}.row-h b{font-size:12.5px}
.pills{display:flex;gap:4px}.pills i{font-style:normal;font-size:9.5px;padding:2px 9px;border-radius:10px;background:#f3f4f6}.pills i.on{background:#16a34a;color:#fff}
.sales strong{display:block;font-size:19px;margin:4px 0}#chart{width:100%;height:135px}
.status b{font-size:12.5px}.bars{display:flex;justify-content:space-around;align-items:flex-end;height:120px;margin:4px 0 8px}
.bars div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px}.bars em{font-style:normal;font-weight:700}.bars i{width:22px;border-radius:11px}
.ord{display:flex;justify-content:space-between;font-size:10px;padding:4px 0;border-top:1px solid #f3f4f6}
.inv table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px}.inv th{color:#6b7280;font-weight:500;text-align:left;padding:4px}.inv td{padding:6px 4px;border-top:1px solid #f3f4f6}
.inv i{font-style:normal;border-radius:8px;padding:1px 7px;font-size:9px}.inv .ok{background:#dcfce7;color:#15803d}.inv .low{background:#fef3c7;color:#b45309}
.ticket{background:#f0fdf4;border-radius:12px;padding:8px 10px;margin-top:8px;display:grid;grid-template-columns:1fr auto;font-size:10px;gap:2px}.ticket i{font-style:normal;background:#fff;color:#16a34a;font-weight:700;font-size:9px;padding:0 6px;border-radius:4px;height:fit-content}.ticket small{grid-column:1/-1;color:#6b7280;font-size:9px}

/* flow shell */
.flow-main{position:absolute;left:0;top:0;bottom:0;right:284px}
.flow-head{display:flex;align-items:center;padding:14px 16px 0 16px}
.steps{display:flex;gap:56px;list-style:none;padding:0;margin-left:110px}
.steps li{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#9ca3af;font-weight:600;transition:color .3s}
.steps i{width:22px;height:22px;border-radius:50%;border:2px solid #d1d5db;background:#fff;position:relative;transition:border-color .3s}
.steps i:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#d1d5db;transition:background .3s}
.steps .on{color:#16a34a}.steps .on i{border-color:#22c55e}.steps .on i:after{background:#22c55e}
.steps .done i{border-color:#22c55e;background:#22c55e}.steps .done i:after{background:#fff;inset:7px}.steps .done{color:#16a34a}
.cart{position:absolute;right:12px;top:12px;bottom:12px;width:262px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;display:flex;flex-direction:column;box-shadow:0 1px 3px #0000000f}
.cart header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid #f3f4f6}.cart header b{font-size:14px}.cart header span{font-size:10px;color:#ef4444;border:1px solid #fecaca;border-radius:6px;padding:3px 8px}
#cart-items{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.empty{margin:auto;text-align:center;color:#9ca3af;font-size:12px;line-height:2}
.citem{border:1px solid #e5e7eb;border-radius:10px;padding:9px 10px;font-size:11px;animation:pop .45s cubic-bezier(.2,.8,.2,1.2)}
.citem b{display:block;font-size:11.5px}.citem small{color:#6b7280;display:block}.citem span{float:right;font-weight:700;color:#15803d}
@keyframes pop{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.cart footer{border-top:1px solid #f3f4f6;padding:12px 14px;background:#fafafa;border-radius:0 0 12px 12px}
.cart footer div{display:flex;justify-content:space-between;font-weight:700;font-size:14px}.cart footer small{display:block;text-align:center;color:#6b7280;font-size:9.5px;margin:4px 0 8px}
.center{text-align:center}h1.center{font-size:26px;font-weight:800;margin-top:6px}.sub{color:#4b5563;font-size:14px;margin-top:4px}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.route{background:linear-gradient(180deg,#f0fdf4,#ecfdf5);border:1px solid #dcfce7;border-radius:18px;padding:22px 16px;text-align:center;box-shadow:0 6px 18px #16a34a14}
.route img{width:104px;height:104px;object-fit:cover;border-radius:20px;box-shadow:0 6px 14px #0002}
.route h3{font-size:16px;margin:12px 0 6px}.route p{font-size:11px;color:#374151;min-height:30px}.route .cta{width:100%;margin-top:8px}
.title{display:flex;gap:16px;align-items:center;margin:10px 0 14px}
.title h1{font-size:21px;font-weight:800}.title p{color:#6b7280;font-size:12.5px}
.modes{display:grid;grid-template-columns:repeat(3,200px);gap:16px;margin-top:10px}
.mode{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 1px 3px #0000000f;transition:transform .15s,border-color .2s}
.mode i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px}.m1{background:#dbeafe;color:#2563eb}.m2{background:#dcfce7;color:#16a34a}.m3{background:#f3e8ff;color:#9333ea}
.mode b{font-size:14px}.mode small{font-size:10.5px;color:#6b7280}
/* builder */
.grid{display:grid;grid-template-columns:392px 1fr;gap:16px}
.dims{background:#eff6ff;border-color:#bfdbfe;padding:12px 16px 14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.fields label{font-size:11px;font-weight:600;display:flex;flex-direction:column;gap:4px}
.fields output{display:block;border:1px solid #dbeafe;background:#f8fbff;border-radius:7px;padding:6px 10px;font-weight:400}
.comps{margin-top:12px;padding:12px 16px 14px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#f3f4f6;border-radius:8px;padding:3px;margin:10px 0 4px;text-align:center;font-size:11px;color:#6b7280}
.tabs>*{padding:5px}.tabs b{background:#fff;border-radius:6px;color:#111827;font-weight:600;box-shadow:0 1px 2px #0000001a}
.group h3{font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;margin:10px 0 6px}
.group h3 i{width:9px;height:9px;border-radius:2px}
.row{display:flex;gap:6px;flex-wrap:wrap}
.pbtn{width:84px;border:1px solid #e5e7eb;background:#fff;border-radius:7px;padding:5px 3px;text-align:center;font-size:10px;transition:transform .15s,background .2s,box-shadow .2s}
.pbtn small{display:block;color:#6b7280;font-size:9px;line-height:1.2}.pbtn b{display:block;margin-top:2px;font-size:10.5px}
.pbtn.door{border-color:#bbf7d0;color:#15803d}.pbtn.door small{color:#16a34a}
.pbtn.window{border-color:#bfdbfe;color:#1d4ed8}.pbtn.window small{color:#2563eb}
.pbtn .qty{display:inline-block;min-width:16px;margin-left:4px;border-radius:9px;background:#16a34a;color:#fff;font-size:9px;padding:0 4px;opacity:0;transition:opacity .2s}
.pbtn .qty.on{opacity:1}
.viz{overflow:hidden}
.viz-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
.toggle{display:flex;gap:6px}.toggle button{border:1px solid #e5e7eb;background:#fff;border-radius:7px;padding:4px 10px;font-size:11px;transition:background .2s}
.toggle button.on{background:#f3f4f6;font-weight:600}
.stage{position:relative;height:378px;background:#f4f3ec}
#three,#sketch{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
#sketch{background:#f9fafb;opacity:0;pointer-events:none}
.stage.two #sketch{opacity:1}.stage.two #three{opacity:0}
.legend{display:flex;gap:12px;justify-content:center;align-items:center;padding:8px;background:#f9fafb;border-top:1px solid #e5e7eb;font-size:10px}
.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px;border-radius:50%}
.lg-regular{background:#9ca3af}.lg-door{background:#22c55e}.lg-window{background:#3b82f6}.lg-open{background:#a855f7}.lg-vitrage{background:#f59e0b}
.config{margin:10px 0;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.config small{color:#6b7280;font-size:10.5px}
#total{font-size:19px;font-weight:700;transition:color .3s}#total.bump{color:#16a34a}
/* upsell */
.up-card{padding:16px 18px}.ups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.up{border:1px solid #e5e7eb;border-radius:12px;padding:12px}.up b{font-size:12px;display:block;min-height:32px}.up strong{color:#16a34a;font-size:15px;display:block;margin:4px 0 8px}
.up div{display:flex;gap:8px}.up input{width:56px;border:1px solid #e5e7eb;border-radius:7px;padding:5px 8px}.up .cta{padding:6px 12px}
.up.added{border-color:#22c55e;background:#f0fdf4}
.up-actions{display:flex;justify-content:center;gap:14px;border-top:1px solid #f3f4f6;margin-top:16px;padding-top:16px}
/* checkout */
.co{display:grid;grid-template-columns:1fr 330px;gap:14px}
.co-left{display:flex;flex-direction:column;gap:10px}.co-left .card,.co-sum{padding:12px 16px}
.co label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;margin-top:8px}
.co input{border:1px solid #e5e7eb;border-radius:7px;padding:7px 10px;font-weight:400;background:#fff;color:#111827;outline:none;transition:border-color .2s}
.co input.typing{border-color:#22c55e;box-shadow:0 0 0 3px #22c55e22}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lbl{font-size:11px;font-weight:600;margin-top:8px}.radios{display:flex;gap:18px;font-size:11.5px;margin-top:6px;color:#374151}.radios .on{color:#15803d;font-weight:600}
#addr-row{opacity:.35;transition:opacity .3s}#addr-row.on{opacity:1}
.sitem{border:1px solid #f3f4f6;border-radius:9px;padding:8px 10px;margin-top:8px;font-size:11px}.sitem b{display:block}.sitem small{color:#6b7280}.sitem span{float:right;font-weight:700}
.sum-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-top:1px solid #f9fafb}.sum-row:first-of-type{margin-top:10px}
.sum-row.total{font-size:15px;font-weight:700;border-top:1px solid #e5e7eb;padding-top:8px}
.co-sum .cta{margin-top:12px;padding:11px}
.toast{margin-top:10px;text-align:center;font-size:11px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:7px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}.toast.on{opacity:1;transform:none}

.badge{position:absolute;left:24px;bottom:8px;font:600 8.5px/1 ui-monospace,monospace;letter-spacing:.12em;color:#6b7280;z-index:5}
#pointer{position:fixed;left:0;top:0;width:24px;height:30px;pointer-events:none;z-index:9;filter:drop-shadow(0 2px 2px #0006);transition:transform .8s cubic-bezier(.3,0,.2,1),opacity .3s;transform:translate(900px,700px)}
#pointer svg{display:block;width:24px;height:30px;transform-origin:2px 2px;transition:transform .12s}
#pointer.press svg{transform:scale(.78)}
#pointer.hide{opacity:0}
.ripple{position:fixed;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #16a34a;pointer-events:none;z-index:8;animation:ripple .5s ease-out forwards}
@keyframes ripple{from{transform:scale(.3);opacity:.9}to{transform:scale(1.3);opacity:0}}
.hover{filter:brightness(.96);box-shadow:0 0 0 2px #22c55e55!important}
body.static #pointer{display:none}