:root{--bg: #eef1ec;--surface: #f9faf7;--surface-2: #e4e9e1;--line: #d3dacf;--ink: #1b2620;--ink-2: #55635a;--canopy: #1f5a3a;--canopy-ink: #f4f8f3;--canopy-soft: #dcebdf;--hardware: #e57d17;--hardware-soft: #fbe7d1;--danger: #b23a2a;--ok: #2f7a45;--font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--radius: 10px;--shadow: 0 1px 2px rgb(20 40 25 / .06), 0 8px 24px rgb(20 40 25 / .08)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #101612;--surface: #172019;--surface-2: #1f2a22;--line: #2c3a30;--ink: #e6ede5;--ink-2: #9fb0a3;--canopy: #7cc493;--canopy-ink: #0d1a12;--canopy-soft: #1f3a29;--hardware: #f59a3c;--hardware-soft: #3a2a17;--danger: #f07a66;--ok: #7cc493;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);color-scheme:dark}}:root[data-theme=dark]{--bg: #101612;--surface: #172019;--surface-2: #1f2a22;--line: #2c3a30;--ink: #e6ede5;--ink-2: #9fb0a3;--canopy: #7cc493;--canopy-ink: #0d1a12;--canopy-soft: #1f3a29;--hardware: #f59a3c;--hardware-soft: #3a2a17;--danger: #f07a66;--ok: #7cc493;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-body);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4{margin:0;font-family:var(--font-display);text-wrap:balance}p{margin:0}.num{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-stretch:100%}.muted{color:var(--ink-2)}.fine{font-size:12px;color:var(--ink-2)}.pad{padding:12px 0}.eyebrow{font:600 11px/1.2 var(--font-display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-stretch:112%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--hardware);outline-offset:2px}.btn{border:1px solid transparent;border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer;background:var(--surface-2);transition:background .15s,border-color .15s,transform .1s}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.sm{padding:6px 11px;font-size:13px}.btn.block{width:100%}.btn.primary{background:var(--canopy);color:var(--canopy-ink)}.btn.primary:hover:not(:disabled){filter:brightness(1.08)}.btn.ghost{background:transparent;border-color:var(--line)}.btn.ghost:hover:not(:disabled){background:var(--surface-2)}.btn.danger{background:var(--danger);color:#fff}.btn.add{padding:6px 14px;background:var(--canopy);color:var(--canopy-ink)}.btn.add.soft{background:transparent;border-color:var(--line);color:var(--ink-2)}.icon{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:inline-grid;place-items:center;line-height:1;font-size:16px;padding:0}.icon:hover{background:var(--surface-2)}.app{height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:baseline;gap:10px}.wordmark{font:800 22px/1 var(--font-display);font-stretch:125%;letter-spacing:-.01em;color:var(--canopy)}.product{font:600 13px/1 var(--font-display);font-stretch:112%;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}.top-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(320px,360px)}.col-left,.col-right{min-height:0;min-width:0;display:flex}.col-left{border-right:1px solid var(--line)}.col-right{border-left:1px solid var(--line)}.panel{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);min-height:0}.panel-head{padding:14px 16px 10px;display:grid;gap:10px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:18px;font-stretch:110%}.panel-scroll{flex:1;overflow-y:auto;padding:4px 16px 16px;min-height:0}.search input{width:100%;padding:8px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer}.chip[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.cat-group{padding-top:14px;display:grid;gap:8px}.cards{list-style:none;margin:0;padding:0;display:grid;gap:8px}.card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .15s,box-shadow .15s}.card:hover{border-color:color-mix(in srgb,var(--canopy) 40%,var(--line))}.card.in-design{border-color:color-mix(in srgb,var(--canopy) 55%,var(--line));background:color-mix(in srgb,var(--canopy-soft) 45%,var(--surface))}.card.placing{border-color:var(--hardware);box-shadow:0 0 0 2px var(--hardware-soft)}.thumb{width:76px;height:76px;border-radius:8px;background:radial-gradient(circle at 50% 70%,#eaf1e4,#d7e2d1);display:grid;place-items:center;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}.thumb-loading{width:26px;height:26px;border-radius:50%;border:3px solid #c3d1bd;border-top-color:#5f8a63;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card-body{min-width:0;display:grid;gap:3px;align-content:start}.card-top{display:flex;gap:6px;align-items:baseline;justify-content:space-between}.card h4{font-size:14.5px;font-weight:650;font-stretch:100%;line-height:1.2}.dims{font-size:12.5px;color:var(--ink-2)}.pill{flex:none;font:600 10.5px/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border-radius:5px;background:var(--canopy);color:var(--canopy-ink)}.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}.price-wrap{display:flex;align-items:center;gap:6px}.price{white-space:nowrap;font:700 16px/1 var(--font-display);font-variant-numeric:tabular-nums}.badge{font:600 10px/1 var(--font-display);text-transform:uppercase;letter-spacing:.07em;padding:3px 5px;border-radius:4px;cursor:help}.badge.pub{background:var(--canopy-soft);color:var(--canopy)}.badge.demo{background:var(--hardware-soft);color:color-mix(in srgb,var(--hardware) 70%,var(--ink))}.why{font-size:12px;color:var(--ink-2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.swatches{display:flex;gap:6px;margin-top:3px}.swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--ink)}.viewport{position:relative;min-width:0;min-height:0;background:#dfe8e4;overflow:hidden}.viewport canvas{display:block;touch-action:none}.viewport>div:first-child{position:absolute!important;top:0;right:0;bottom:0;left:0}.viewport-message{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;gap:6px;padding:24px;color:#1b2620}.view-tools{position:absolute;top:12px;right:12px;display:flex;gap:2px;padding:3px;border-radius:10px;background:#ffffffe0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tool{border:0;background:transparent;padding:6px 10px;border-radius:7px;font:600 12.5px/1 var(--font-display);cursor:pointer;color:#1b2620}.tool:hover{background:#e8eee6}.tool.on{background:#1f5a3a;color:#f4f8f3}.figure-toggle{position:absolute;top:56px;right:12px;display:flex;gap:6px;align-items:center;font-size:12.5px;color:#33423a;background:#ffffffbf;padding:4px 9px;border-radius:8px}.model-note{position:absolute;bottom:10px;right:12px;font-size:11px;color:#4b5b51;background:#ffffffa6;padding:3px 8px;border-radius:6px;pointer-events:none}.marker-label{font:600 12px/1 var(--font-display);padding:5px 8px;border-radius:6px;border:0;background:#e57d17;color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px #0003}.marker-label:hover{background:#c96a0f}.placing-bar{position:absolute;top:12px;left:12px;right:272px;display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--hardware)}.placing-options{display:flex;flex-wrap:wrap;gap:6px}.placing-bar .cancel{background:var(--surface-2)}.empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));padding:24px;border-radius:16px;background:#f9faf7f0;color:#1b2620;box-shadow:var(--shadow);display:grid;gap:10px}.empty .eyebrow,.empty .muted{color:#55635a}.empty h1{font-size:clamp(22px,3vw,30px);font-weight:800;font-stretch:115%;line-height:1.05;letter-spacing:-.01em}.empty-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:6px}.template{text-align:left;display:grid;gap:3px;padding:12px;border-radius:10px;border:1px solid #d3dacf;background:#fff;cursor:pointer;color:#1b2620}.template:hover{border-color:#1f5a3a}.template strong{font-family:var(--font-display);font-size:15px}.template span{font-size:13px;color:#55635a}.template .num{color:#1f5a3a;font-size:12px;font-weight:700}.selected-panel{position:absolute;left:12px;bottom:12px;width:min(300px,calc(100% - 24px));padding:12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);border-top:3px solid var(--hardware);display:grid;gap:10px}.sp-head{display:flex;justify-content:space-between;gap:8px}.sp-head>div{display:grid;gap:1px}.sp-head .muted{font-size:12.5px}.sp-confirm{display:grid;gap:8px;font-size:13px}.toast{position:absolute;left:50%;bottom:46px;transform:translate(-50%);max-width:min(520px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:#1b2620;color:#f4f8f3;font-size:14px;box-shadow:var(--shadow);animation:rise .2s ease-out}.toast.error{background:#8f2f22}.toast.success{background:#1f5a3a}@keyframes rise{0%{opacity:0;transform:translate(-50%,8px)}}.name-field{display:grid;gap:4px}.name-field input{font:700 19px/1.2 var(--font-display);font-stretch:108%;border:1px solid transparent;border-radius:7px;padding:4px 6px;margin-left:-6px;background:transparent;width:calc(100% + 6px)}.name-field input:hover,.name-field input:focus{border-color:var(--line);background:var(--bg)}.sum-empty{padding:20px 0;display:grid;gap:6px}.lines{list-style:none;margin:0;padding:0}.line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name name x" "variant variant variant" "qty unit sub";align-items:center;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}.line.selected{background:linear-gradient(90deg,var(--hardware-soft),transparent);margin:0 -16px;padding-left:16px;padding-right:16px}.line-name{grid-area:name;display:flex;gap:6px;align-items:center;border:0;background:none;padding:0;text-align:left;font-weight:600;cursor:pointer;min-width:0}.line-name:hover span:first-child{text-decoration:underline}.line .x{grid-area:x;width:24px;height:24px;font-size:15px}.variant{grid-area:variant;font-size:12.5px;justify-self:start}select.variant{padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface)}.qty{grid-area:qty;display:flex;align-items:center;gap:8px}.qty .icon{width:26px;height:26px}.qty .num{min-width:16px;text-align:center;font-weight:700}.unit{grid-area:unit;font-size:12px;justify-self:end}.sub{grid-area:sub;font-weight:700;justify-self:end;min-width:72px;text-align:right}.totals{padding:14px 16px 16px;border-top:1px solid var(--line);display:grid;gap:10px;background:var(--surface)}.totals dl{margin:0;display:grid;gap:6px}.totals dl div{display:flex;justify-content:space-between;gap:10px;font-size:14px}.totals dd{margin:0}.totals .grand{padding-top:8px;border-top:1px dashed var(--line);align-items:baseline}.totals .grand dt{font:700 15px var(--font-display)}.totals .grand dd{font-size:26px;font-weight:800;color:var(--canopy);font-stretch:105%}.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0c140e73;display:grid;place-items:center;padding:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.modal{width:min(460px,100%);max-height:calc(100% - 24px);overflow:auto;background:var(--surface);border-radius:14px;box-shadow:var(--shadow)}.modal.wide{width:min(600px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 0}.modal-head h2{font-size:20px;font-stretch:110%}.modal-body{padding:14px 18px 18px}.stack{display:grid;gap:12px}.field{display:grid;gap:4px;font-size:13.5px;font-weight:600}.field input,.field textarea,.field select,.copybox textarea{font-weight:400;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);width:100%}.field.has-err input{border-color:var(--danger)}.err{color:var(--danger);font-size:12.5px;font-weight:500}.field-row{display:flex;gap:8px;align-items:end}.grow{flex:1}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check{display:flex;gap:8px;align-items:center;font-size:14px}.row-end{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.quote{display:grid;gap:12px}.quote-design{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--canopy-soft)}.saved-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.saved-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px}.saved-list li>div:first-child{display:grid;min-width:0}.saved-list .muted{font-size:12.5px}.saved-list .actions{display:flex;gap:6px;align-items:center}.code-in{display:grid;gap:8px}.code-in summary{cursor:pointer;font-weight:600}.code-in[open]{display:grid;gap:8px}.copybox{display:grid;gap:6px}.copybox textarea{font:12.5px/1.45 ui-monospace,SF Mono,Menlo,Consolas,monospace;resize:vertical}.copybox .btn{justify-self:start}.notice{padding:12px 14px;border-radius:10px;background:var(--hardware-soft);font-size:14px}.contact{margin:0;display:grid;gap:4px;font-size:14px}.contact div{display:flex;gap:10px}.contact dt{width:76px;color:var(--ink-2)}.contact dd{margin:0}.select-all{-webkit-user-select:all;user-select:all;font-weight:600}.mobile-tabs{display:none}@media (max-width: 1180px){.layout{grid-template-columns:290px minmax(0,1fr) 310px}.card{grid-template-columns:64px minmax(0,1fr)}.thumb{width:64px;height:64px}}@media (max-width: 900px){.app{height:auto;min-height:100%}.topbar{flex-wrap:wrap}.product{display:none}.layout{display:flex;flex-direction:column}.viewport{order:-1;height:56vh;min-height:340px;flex:none}.col-left,.col-right{display:none;border:0}.col-left.m-show,.col-right.m-show{display:flex}.panel-scroll{overflow:visible}.layout{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}.mobile-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line)}.mobile-tabs button{border:1px solid var(--line);background:transparent;border-radius:9px;padding:10px;font-weight:700;display:flex;justify-content:center;gap:8px}.mobile-tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.placing-bar{right:12px;top:auto;bottom:12px;max-height:45%;overflow:auto}.model-note{display:none}.empty{padding:16px;top:50%}.empty h1{font-size:21px}.empty-actions{grid-template-columns:1fr 1fr}.template span:not(.num){display:none}.two{grid-template-columns:1fr}.selected-panel,.toast{bottom:12px}}@media (max-width: 420px){.view-tools .tool{padding:6px 7px}.top-actions .btn{padding:5px 8px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}