*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#222;background:#f4f2ee}
#app{display:grid;grid-template-columns:1fr 400px;height:100vh}
#stage{position:relative;min-height:300px;background:linear-gradient(#e9e6e0,#d9d5cd)}
#c{width:100%;height:100%;display:block;touch-action:none}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:#555;pointer-events:none}
#stepLabel{position:absolute;left:16px;top:14px;background:rgba(255,255,255,.88);border-radius:8px;padding:6px 12px;font-size:15px;font-weight:600;display:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}
#stepLabel small{display:block;font-weight:400;color:#666;font-size:12px}
#viewbar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#viewbar label{background:rgba(255,255,255,.85);border-radius:6px;padding:6px 8px;font-size:13px}
button{font:inherit;font-size:14px;border:1px solid #bbb;background:#fff;border-radius:6px;padding:7px 12px;cursor:pointer}
button.primary{background:#2f5d50;color:#fff;border-color:#2f5d50}
button.wide{width:100%;margin-top:10px}
#proto{position:absolute;right:12px;top:12px;font-size:11px;background:#fff3cd;border:1px solid #e0c36b;border-radius:6px;padding:4px 8px}
#panel{overflow-y:auto;padding:16px 18px 40px;background:#fff;border-left:1px solid #ddd}
h1{font-size:20px;margin:0 0 8px}
h2{font-size:15px;margin:18px 0 6px}
h2 small{font-weight:400;color:#777;font-size:11px}
#placeholderBanner{background:#c62828;color:#fff;font-weight:700;font-size:12px;padding:6px 8px;border-radius:6px;margin-bottom:8px}
#placeholderBanner code{color:#fff}
.opt{margin:12px 0}
.opt .lbl{font-size:13px;font-weight:600;margin-bottom:5px;display:flex;justify-content:space-between}
.opt .lbl span{font-weight:400;color:#666}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 auto;padding:7px 8px;font-size:13px}
.seg button.on{background:#2f5d50;color:#fff;border-color:#2f5d50}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.note{font-size:11px;color:#777;margin-top:3px}
.swrow{display:flex;flex-wrap:wrap;gap:4px}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #aaa;cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 2px #2f5d50;transform:scale(1.12)}
.sw{position:relative}
.sw.measured::after{content:"";position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:#2a9d4b;border:1.5px solid #fff}
.sw.approx::after{content:"";position:absolute;right:-3px;bottom:-3px;width:5px;height:5px;border-radius:50%;background:#fff;border:1.5px dashed #999}
.swkey{font-size:11px;color:#666;margin:2px 0 6px;display:flex;gap:10px;align-items:center}
.swkey i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:middle}
.cg{margin:8px 0}
.cg .lbl{font-size:12px;font-weight:600;margin-bottom:3px}
.cg .lbl span{font-weight:400;color:#555}
table{width:100%;border-collapse:collapse;font-size:12.5px}
td{padding:3px 4px;border-bottom:1px solid #eee;vertical-align:top}
td.r{text-align:right;white-space:nowrap}
td.k{color:#555;width:38%}
.ph{color:#c62828;font-size:10px;font-weight:700;margin-left:4px}
#total{font-size:20px;font-weight:700;text-align:right;margin-top:6px}
pre{font-size:11px;background:#f6f6f6;padding:8px;border-radius:6px;white-space:pre-wrap;word-break:break-all;max-height:320px;overflow:auto}
@media (max-width:820px){#app{grid-template-columns:1fr;grid-template-rows:56vh auto;height:auto}#panel{border-left:0;border-top:1px solid #ddd}#stage{height:56vh}}

/* furniture panel */
#furniture{border-top:1px solid #eee;margin-top:6px}
.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.addgrid button{text-align:left;padding:6px 8px;font-size:12px;line-height:1.25}
.addgrid button b{display:block;font-weight:600}
.addgrid button small{color:#555}
.lbl2{font-size:13px;font-weight:600;margin:10px 0 5px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.lbl2 .sku{font-weight:400;color:#777;font-size:11px}
button.mini{padding:2px 8px;font-size:11px}
button.danger{color:#b3261e;border-color:#e3a9a5}
.plist .prow{display:flex;align-items:center;gap:8px;padding:5px 6px;border:1px solid #eee;border-radius:6px;margin-bottom:4px;cursor:pointer;font-size:12.5px}
.plist .prow.on{border-color:#2f9d6a;background:#eef8f2}
.prow .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px #aaa;flex:none}
.prow .pn{flex:1}
.prow .pn small{display:block;color:#777;font-size:11px}
.prow .pp{color:#444}
.prow .x{padding:0 7px;font-size:15px;line-height:1.3}
.selcard{border:1px solid #2f9d6a;border-radius:8px;padding:6px 10px 10px;margin:8px 0;background:#fbfefc}
.rowbtns{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.rowbtns button{padding:5px 8px;font-size:12px}
.freerot{display:flex;align-items:center;gap:8px;font-size:12px}
.freerot label{display:flex;align-items:center;gap:6px;flex:1}
.freerot input{flex:1}
.sw.stock{border-color:#2f5d50;border-width:3px}
.stockkey{width:9px!important;height:9px!important;border:2.5px solid #2f5d50;background:#ddd}
.phc{color:#c62828}
.warn{background:#fff3cd;border:1px solid #e0c36b;border-radius:6px;padding:5px 8px;font-size:12px;margin:6px 0}
tr.sub td{font-weight:600;padding-top:8px;color:#444}
tr.tot td{font-weight:600;border-top:1px solid #ccc}
tr.disc td{color:#1f7a45;font-weight:600}
#nudge{margin-top:8px;font-size:13px;background:#f3f7f5;border:1px solid #cfe3d8;border-radius:8px;padding:8px 10px}
#nudge.on{background:#eaf6ee}
#nudge .bar{height:7px;background:#dde7e1;border-radius:4px;margin:6px 0 4px;overflow:hidden}
#nudge .bar i{display:block;height:100%;background:#2f9d6a}
#nudge small{color:#666;font-size:11px}
#toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(30,30,30,.86);color:#fff;font-size:13px;padding:6px 12px;border-radius:6px;opacity:0;transition:opacity .25s;pointer-events:none}
#look{position:absolute;right:12px;top:42px;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.88);border-radius:8px;padding:6px 10px;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
#look b{font-size:12px;color:#555}
#look label{cursor:pointer;white-space:nowrap}
@media (max-width:820px){#look{top:12px}}
/* room pack dropdown (Furniture header) - overlays the panel, so the panel keeps its size */
.furnlbl{align-items:center}
.pack{position:relative}
.packbtn{padding:2px 8px;font-size:12px;font-weight:600;line-height:1.4;border-color:#2f5d50;color:#2f5d50;background:#f3f7f5;border-radius:12px}
.packbtn i{font-style:normal;font-size:10px;margin-left:2px}
.packlist{position:absolute;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px;list-style:none;min-width:200px;white-space:nowrap;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;font-weight:400}
.packlist[hidden]{display:none}
.packlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;border-radius:5px;cursor:pointer;color:#222}
.packlist li small{color:#777;font-size:11px}
.packlist li:hover,.packlist li:focus{background:#eef8f2;outline:none}
.packlist li[aria-selected="true"]{font-weight:600;color:#2f5d50;background:#f3f7f5}
.packlist li.soon{color:#aaa;cursor:not-allowed}
.packlist li.soon:hover{background:none}
.packlist li.soon small{font-style:italic;color:#aaa}
/* Limited Edition colours (config.js palette limited:true): small asterisk on the swatch + one footnote under the colour panel */
.sw.le::before{content:"*";position:absolute;left:-4px;top:-7px;font:700 12px/1 system-ui,sans-serif;color:#b26a00;text-shadow:0 0 2px #fff,0 0 2px #fff}
.lek{color:#b26a00;margin-right:3px}
.cg .lbl .lel{font-weight:600;color:#b26a00}
.cg .lbl .shl{font-weight:400;color:#2f5d50;font-size:10.5px}
.lefoot{font-size:11px;color:#8a5a00;margin-top:4px}