[hidden] { display: none !important; }
:root {
  --ink: #f6f1e7; --mute: rgba(246,241,231,.66); --line: rgba(255,255,255,.14); --gold: #e6b65c; --terra: #c8643b;
  --glass: linear-gradient(160deg, rgba(30,26,22,.78), rgba(18,16,14,.72));
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1714; color: var(--ink); font-family: var(--sans); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; }
.lbl { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font: 600 12px var(--sans); color: #2b231c;
  background: rgba(255,250,240,.86); padding: 4px 8px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lbl small { display: block; font-weight: 500; font-size: 10px; color: #6b5d4f; }
.lbl.zone { background: transparent; box-shadow: none; color: #fff; font: 700 13px var(--sans); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.lbl.zone small { color: rgba(255,255,255,.85); }
.lbl.good { outline: 2px solid #4ade80; } .lbl.ok { outline: 2px solid #facc15; } .lbl.avoid { outline: 2px solid #f87171; }

.top { z-index: 25; position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { text-decoration: none; color: var(--gold); font: 600 24px var(--serif); }
.brand span { color: var(--ink); font: 600 13px var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-left: 6px; }
.title { font: 600 15px var(--sans); color: var(--ink); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.title select { margin-left: 8px; background: var(--glass); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font: 600 13px var(--sans); }
.title select option { color: #111; }
.title em { font-style: normal; color: var(--mute); font-weight: 500; margin-left: 6px; }
.modes { margin-left: auto; display: flex; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 4px; backdrop-filter: blur(12px); }
.modes button { border: 0; background: transparent; color: var(--mute); font: 600 13px var(--sans); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.modes button[aria-pressed="true"] { background: var(--ink); color: #1a1714; }

.panel { position: fixed; right: 16px; top: 76px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 320px; overflow-y: auto; padding: 16px 18px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.panel section { padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.panel h3 { margin: 4px 0 10px; font: 600 22px var(--serif); color: var(--gold); }
.panel h3 small { font: 500 11px var(--sans); color: var(--mute); letter-spacing: .06em; margin-left: 6px; }
.panel label { display: grid; grid-template-columns: 78px 1fr 58px; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); margin: 8px 0; }
.panel label.tog { display: flex; gap: 10px; color: var(--ink); cursor: pointer; }
.panel select { grid-column: 2 / 4; background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 13px var(--sans); }
.panel select option { color: #111; }
.panel input[type=range] { accent-color: var(--gold); width: 100%; }
.panel output { font: 600 12px var(--sans); color: var(--ink); text-align: right; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.row button, .panel button { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: 600 12px var(--sans); cursor: pointer; }
.row button:hover { border-color: var(--gold); }
.sunread { font-size: 12px; color: var(--mute); margin-left: auto; }
#vastuList { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
#vastuList li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; font-size: 13px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
#vastuList li .z { font: 700 11px var(--sans); color: var(--mute); }
#vastuList li .w { grid-column: 2 / 4; font-size: 11.5px; color: var(--mute); }
.note { font-size: 12px; color: var(--mute); line-height: 1.5; }
.panelTog { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-size: 20px; }
.hint { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 13px; }

@media (max-width: 760px) {
  .panel { top: auto; left: 16px; right: 16px; width: auto; max-height: 55vh; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .panel.closed { display: none; }
  .panelTog { display: block; }
  .title em { display: none; }
}

/* ?ui=0 — no chrome, for screen recording and poster images */
.bare .top, .bare .panel, .bare .panelTog, .bare .hint { display: none !important; }

#sunList { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 5px; }
#sunList li { display: grid; grid-template-columns: 110px 1fr 46px; gap: 8px; align-items: center; font-size: 12.5px; }
#sunList .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
#sunList .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f6c453, #f0772f); }
#sunList b { text-align: right; font-weight: 600; }
.lbl .sun[hidden] { display: none; }
.lbl .sun { display: block; font-size: 10px; font-weight: 700; color: #b4530f; }

/* ---- plan editor */
.editing .panel:not(.editpanel) { display: none; }
.editor { position: fixed; inset: 0; background: #1d1915; padding: 70px 360px 16px 16px; }
.ed-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.ed-svg[data-cursor="ew"] { cursor: ew-resize; } .ed-svg[data-cursor="move"] { cursor: move; } .ed-svg[data-cursor="ns"] { cursor: ns-resize; }
.ed-svg[data-tool="door"], .ed-svg[data-tool="window"], .ed-svg[data-tool="split"], .ed-svg[data-tool="merge"] { cursor: crosshair; }
.ed-grid line { stroke: rgba(255,255,255,.05); stroke-width: .04; } .ed-grid line.major { stroke: rgba(255,255,255,.12); }
.ed-room rect { opacity: .78; } .ed-room.sel rect { opacity: 1; stroke: var(--gold); stroke-width: .25; } .ed-room.merge rect { stroke: #60a5fa; stroke-width: .3; }
.ed-room text { text-anchor: middle; fill: #2b231c; font-family: var(--sans); pointer-events: none; paint-order: stroke; stroke: rgba(255,248,236,.75); stroke-width: .14; }
.ed-room text.nm { font-weight: 700; } .ed-room text.dim { fill: #5d4f42; }
.ed-wall { fill: none; stroke: #f6f1e7; stroke-width: .35; pointer-events: none; }
.ed-outer { fill: none; stroke: #f6f1e7; stroke-width: .7; pointer-events: none; }
.ed-op .gap { stroke: #1d1915; stroke-width: .42; }
.ed-op.window .glass { stroke: #7dd3fc; stroke-width: .28; }
.ed-op.door .swing { fill: none; stroke: #e6b65c; stroke-width: .12; }
.ed-op.open .gap { stroke: #1d1915; stroke-dasharray: .3 .3; }
.ed-op.sel .gap { stroke: var(--gold); }
.ed-hover { stroke: #7dd3fc; stroke-width: .5; stroke-linecap: round; pointer-events: none; }
.ed-ghost { stroke: var(--gold); stroke-width: .45; stroke-dasharray: .6 .35; pointer-events: none; } .ed-ghost.bad { stroke: #f87171; }
.editpanel .tools { display: flex; flex-wrap: wrap; gap: 6px; }
.editpanel .tools button[aria-pressed="true"] { background: var(--ink); color: #1a1714; }
.editpanel input:not([type]) , .editpanel input[id="edName"] { grid-column: 2 / 4; background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 13px var(--sans); }
.ed-link { width: 100%; margin-top: 8px; background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 11px var(--sans); }
.note.ok { color: #86efac; } .note.bad { color: #fca5a5; }
.toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 30; max-width: min(520px, calc(100vw - 32px));
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-size: 13px; backdrop-filter: blur(12px); }
.toast.bad { border-color: rgba(248,113,113,.6); }
@media (max-width: 760px) { .editor { padding: 150px 8px 44vh; } .editing .editpanel { display: block; top: auto; max-height: 42vh; } }

/* big plans in 3D: names only */
#labels.compact .lbl small, #labels.compact .lbl .sun { display: none; }
#labels.compact .lbl { font-size: 11px; padding: 3px 7px; }

/* editor: furniture */
.ed-furn rect { fill: rgba(58,40,26,.62); stroke: rgba(255,240,215,.7); stroke-width: .08; }
.ed-furn.on-counter rect { fill: rgba(30,30,30,.55); }
.ed-furn .front { stroke: #e6b65c; stroke-width: .22; stroke-linecap: round; }
.ed-furn text { fill: #f6f1e7; text-anchor: middle; font-family: var(--sans); font-weight: 600; pointer-events: none; }
.ed-furn.sel rect { stroke: var(--gold); stroke-width: .2; fill: rgba(90,62,36,.8); }
.ed-furn-ghost { fill: rgba(230,182,92,.25); stroke: var(--gold); stroke-width: .12; stroke-dasharray: .3 .2; pointer-events: none; }
.ed-furn-bad { fill: rgba(248,113,113,.25); stroke: #f87171; stroke-width: .12; pointer-events: none; }
.cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 8px; }
.cat-item { display: grid; gap: 3px; justify-items: center; padding: 6px 4px !important; border-radius: 12px !important; font: 600 11px var(--sans) !important; text-align: center; }
.cat-item small { color: var(--mute); font-weight: 500; font-size: 10px; }
.cat-item[aria-pressed="true"], [data-face][aria-pressed="true"] { background: var(--ink) !important; color: #1a1714 !important; }
.cat-item .thumb { width: 54px; height: 54px; display: grid; place-items: center; background: rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
.cat-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.cat-item .thumb img + svg { display: none; }
.cat-item .thumb svg { width: 40px; height: 40px; } .cat-item .thumb svg rect { fill: rgba(230,182,92,.35); stroke: var(--gold); stroke-width: .4; }

/* finishes & cost */
#finishPanel .total { display: grid; gap: 2px; margin-bottom: 8px; }
#finishPanel .total b { font: 600 26px var(--serif); color: var(--ink); }
#finishPanel .total span { font-size: 12px; color: var(--mute); }
#finishPanel .costsplit { display: grid; gap: 3px; font-size: 12.5px; margin-bottom: 8px; }
#finishPanel .costsplit div { display: flex; justify-content: space-between; gap: 8px; } #finishPanel .costsplit span { color: var(--mute); }
#finishPanel label { grid-template-columns: 52px 1fr; } #finishPanel select { grid-column: 2 / 3; font-size: 12px; }

.panel { overflow-x: hidden; }
#finishPanel select { min-width: 0; width: 100%; }

/* editor: drawing + tracing */
.ed-svg[data-tool="draw"], .ed-svg[data-tool="trace-scale"] { cursor: crosshair; } .ed-svg[data-tool="trace-move"] { cursor: move; }
.ed-trace { pointer-events: none; }
.ed-svg.tracing .ed-room rect { opacity: .5; }
.ed-draw { fill: rgba(230,182,92,.28); stroke: var(--gold); stroke-width: .18; stroke-dasharray: .4 .25; pointer-events: none; }
.ed-draw.bad { fill: rgba(248,113,113,.22); stroke: #f87171; }
.ed-draw-dim { fill: #fff; text-anchor: middle; font-family: var(--sans); font-weight: 700; paint-order: stroke; stroke: #1d1915; stroke-width: .2; pointer-events: none; }
.ed-snap { fill: var(--gold); pointer-events: none; }
.ed-scale-pt { fill: #f87171; stroke: #fff; stroke-width: .1; pointer-events: none; } .ed-scale-line { stroke: #f87171; stroke-width: .15; pointer-events: none; }
.editpanel input[type=number] { width: 64px; background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; font: 600 13px var(--sans); }
.editpanel #edDraw label, .editpanel #edTraceCtl label { grid-template-columns: 78px 1fr; }

/* walk: room you just entered */
.roomnow { position: fixed; left: 50%; top: calc(80px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); pointer-events: none; opacity: 0;
  font: 600 30px var(--serif); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.roomnow.show { animation: roomnow 2.6s ease-out; }
@keyframes roomnow { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; } }
body:not(.walking) .roomnow { display: none; }

/* walk extras */
.photo { margin-left: auto; background: var(--glass); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: 600 13px var(--sans); cursor: pointer; backdrop-filter: blur(12px); }
.photo + .modes { margin-left: 0; }
.minimap { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 240px; height: 200px; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.4); cursor: pointer; }
.joy { position: fixed; left: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: 120px; height: 120px; border-radius: 50%; background: rgba(20,17,14,.45); border: 1px solid var(--line); touch-action: none; display: grid; place-items: center; backdrop-filter: blur(8px); }
.joy i { width: 52px; height: 52px; border-radius: 50%; background: rgba(246,241,231,.85); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
@media (max-width: 760px) { .minimap { left: auto; right: 16px; top: calc(118px + env(safe-area-inset-top, 0px)); bottom: auto; width: 150px; height: 125px; } .photo { padding: 7px 10px; font-size: 12px; } }
.bare .photo, .bare .minimap, .bare .joy { display: none !important; }

body.touch .minimap { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }

/* interiors: themes, repaint, design slots */
.panel h4 { margin: 14px 0 6px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.themes button { display: grid; gap: 6px; text-align: left; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); font: 600 12px var(--sans); cursor: pointer; }
.themes button i { display: flex; height: 14px; border-radius: 4px; overflow: hidden; }
.themes button i b { flex: 1; }
.themes button[aria-pressed="true"] { border-color: var(--gold); background: rgba(230,182,92,.14); }
.seg { display: flex; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 6px 0 8px; }
.seg button { flex: 1; border: 0 !important; background: transparent !important; color: var(--mute) !important; border-radius: 999px !important; }
.seg button[aria-pressed="true"] { background: var(--ink) !important; color: #1a1714 !important; }
.paints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.paints button.sw { width: 26px; height: 26px; padding: 0 !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,.18) !important; }
.paints button.sw[aria-pressed="true"] { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(230,182,92,.35); }
.paints input[type=color] { width: 30px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; }
.paints .reset { padding: 4px 10px !important; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slots .slot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px !important; }
.slots .slot i { display: inline-flex; width: 26px; height: 10px; border-radius: 3px; overflow: hidden; } .slots .slot i b { flex: 1; }
.slots .slot .x { border: 0 !important; background: transparent !important; color: var(--mute) !important; padding: 0 4px !important; font-size: 14px; }
.panel button.primary { background: var(--gold); color: #1a1714; border-color: var(--gold); }
/* before/after wipe */
.beforecv { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.wipe { position: fixed; inset: 0; pointer-events: none; }
.wipe-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255,255,255,.9); box-shadow: 0 0 12px rgba(0,0,0,.5); }
.wipe-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: var(--glass); color: #fff; font: 700 18px var(--sans); cursor: ew-resize; pointer-events: auto; backdrop-filter: blur(10px); touch-action: none; }
.wipe-tag { position: absolute; top: 84px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.wipe-tag.l { left: 20px; } .wipe-tag.r { right: 356px; }
.comparebar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(calc(-50% - 170px)); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  max-width: min(760px, calc(100vw - 380px)); padding: 10px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); font-size: 13px; }
.comparebar label { display: flex; gap: 8px; align-items: center; color: var(--mute); }
.comparebar select { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 13px var(--sans); } .comparebar select option { color: #111; }
.comparebar button { background: var(--ink); color: #1a1714; border: 0; border-radius: 999px; padding: 7px 16px; font: 700 12px var(--sans); cursor: pointer; }
.comparebar .expro { flex-basis: 100%; text-align: center; color: var(--mute); font-size: 12px; text-decoration: none; } .comparebar .expro b { color: var(--gold); }
.comparing .roomnow, .comparing .minimap, .comparing .hint { display: none !important; }
@media (max-width: 760px) { .wipe-tag.r { right: 20px; } .comparebar { transform: translateX(-50%); max-width: calc(100vw - 32px); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.panel.closed ~ .comparebar { transform: translateX(-50%); max-width: calc(100vw - 32px); }
.bare .wipe-tag, .bare .comparebar { display: none !important; }
/* furnish this room: show mode */
.showcv { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.showbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  max-width: calc(100vw - 32px); padding: 8px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); font-size: 12px; color: var(--mute); }
.showbar #showStatus:empty { display: none; } .showbar #showStatus { padding: 0 6px; }
.showbar button { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: 600 12px var(--sans); cursor: pointer; }
.showbar #showRec169, .showbar #showRec916, .showbar #showStopRec { color: #ffb4a8; }
.showing .top, .showing .panel, .showing .panelTog, .showing #labels, .showing .minimap, .showing .joy, .showing .hint, .showing .roomnow { display: none !important; }
#scene.recording { right: auto; bottom: auto; }
.reccv { position: fixed; z-index: 1; pointer-events: none; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
body:has(.reccv) { background: #0b0a09; }
@media (max-width: 760px) { .showbar { border-radius: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }