/* Room Builder — demo. Same layout and look as the real single-file app. rem only. */
:root {
  --bg: #eef0f4; --panel: #ffffff; --panel2: #f5f6f9; --line: #dde1e8; --text: #1c2230; --muted: #677085;
  --accent: #2f6fed; --accentw: #e5edfd; --danger: #d63b3b; --dangerw: #fdeaea; --warnc: #8a5a00; --warnw: #fff3d1;
  --shadow: 0 .125rem .75rem rgb(20 30 50 / 14%);
  /* kit tokens */
  --surface: var(--panel); --surface-2: var(--panel2); --line-strong: #cfd3da; --accent-soft: var(--accentw);
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 .875rem/1.4 var(--font); overflow: hidden; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.app { display: grid; height: 100vh; height: 100dvh; grid-template-columns: 16.5rem minmax(0, 1fr) 17.5rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar bar bar" "left stage right"; }
.toolbar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .5rem .875rem; background: var(--panel); border-bottom: .0625rem solid var(--line); z-index: 5; }
.brand { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; white-space: nowrap; }
.brand .logo { width: 1.75rem; height: 1.75rem; border-radius: .45rem; background: var(--accent); display: grid; place-items: center; color: #fff; }
.brand .logo .ms { font-size: 1.15rem; width: auto; height: auto; }
.grp { display: flex; align-items: center; gap: .375rem; padding-left: .75rem; border-left: .0625rem solid var(--line); }
.spacer { flex: 1; }
.side { overflow: auto; padding: .75rem; display: flex; flex-direction: column; gap: .75rem; min-height: 0; }
.side.left { grid-area: left; border-right: .0625rem solid var(--line); }
.side.right { grid-area: right; border-left: .0625rem solid var(--line); }
.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: 0; }
.stage.panning canvas, .stage canvas.grabbing { cursor: grabbing; }
.status { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: none; font-size: .75rem; color: var(--muted); }
.chip { background: var(--panel); border: .0625rem solid var(--line); border-radius: .4rem; padding: .2rem .5rem; box-shadow: var(--shadow); white-space: nowrap; }
.chip:empty { display: none; }
.no3d { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--muted); }
.stage-tools { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .375rem; z-index: 4; }
.stage-tools .btn { box-shadow: var(--shadow); }
.focus-mark { position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); pointer-events: none; opacity: .55; }
.focus-mark::before, .focus-mark::after { content: ""; position: absolute; background: var(--muted); }
.focus-mark::before { left: 50%; top: 0; bottom: 0; width: .0625rem; transform: translateX(-50%); }
.focus-mark::after { top: 50%; left: 0; right: 0; height: .0625rem; transform: translateY(-50%); }
.hello { position: absolute; left: 50%; top: .875rem; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: .5rem; background: var(--text); color: #fff; border-radius: 2rem; padding: .45rem .5rem .45rem .875rem; font-size: .8125rem; box-shadow: var(--shadow); max-width: calc(100% - 9rem); }
.hello span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hello button { border: 0; background: rgb(255 255 255 / 15%); color: #fff; border-radius: 50%; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; cursor: pointer; flex: none; }
.hello button .ms { font-size: 1rem; width: 1rem; height: 1rem; }

/* cards */
.card { background: var(--panel); border: .0625rem solid var(--line); border-radius: .6rem; padding: .75rem; }
.card h2 { margin: 0 0 .625rem; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.card h2 .count { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.meta { margin: .625rem 0 0; color: var(--muted); font-size: .75rem; }
.hint { color: var(--muted); margin: 0; font-size: .8125rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.fields .wide { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lbl { font-size: .75rem; color: var(--muted); }
.sub { font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: .25rem 0 -.25rem; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; padding: 0 .625rem; border: .0625rem solid var(--line); border-radius: .4rem; background: var(--panel); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--panel2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.icon { width: 2rem; padding: 0; }
.btn[aria-pressed="true"] { background: var(--accentw); border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--danger); }
:focus-visible { outline: .125rem solid var(--accent); outline-offset: .0625rem; }
.seg { display: inline-flex; border: .0625rem solid var(--line); border-radius: .4rem; overflow: hidden; background: var(--panel); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; padding: 0 .75rem; border: 0; background: transparent; cursor: pointer; flex: 1; }
.seg button + button { border-left: .0625rem solid var(--line); }
.seg button:hover { background: var(--panel2); }
.seg button[aria-pressed="true"] { background: var(--accentw); color: var(--accent); font-weight: 600; }
.seg.full { display: flex; }
.f { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.inp { display: flex; align-items: center; border: .0625rem solid var(--line); border-radius: .4rem; background: var(--panel); padding: 0 .5rem; min-height: 2rem; }
.inp:focus-within, .txt:focus { border-color: var(--accent); box-shadow: 0 0 0 .1875rem var(--accentw); outline: 0; }
.inp input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .3rem 0; outline: 0; font-variant-numeric: tabular-nums; }
.inp em { font-style: normal; color: var(--muted); font-size: .75rem; margin-left: .25rem; }
.txt { width: 100%; min-height: 2rem; border: .0625rem solid var(--line); border-radius: .4rem; background: var(--panel); padding: .3rem .5rem; }
.f.num .lbl, .f.num .inp em { cursor: ew-resize; user-select: none; }
.f.num .inp input:not(:focus) { cursor: ew-resize; }
.f.num.ro .lbl, .f.num.ro .inp em, .f.num.ro .inp input { cursor: default; }
body.scrubbing, body.scrubbing * { cursor: ew-resize !important; user-select: none !important; }

/* presets + swatches */
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .625rem; }
.tools .btn { padding: 0 .25rem; gap: .25rem; font-size: .75rem; min-width: 0; overflow: hidden; }
.tools .btn .ms { font-size: 1rem; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.preset { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem .25rem; border: .0625rem solid var(--line); border-radius: .5rem; background: var(--panel); cursor: pointer; font-size: .6875rem; text-align: center; line-height: 1.2; }
.preset:hover { background: var(--panel2); border-color: var(--accent); }
.preset .ms { color: var(--muted); }
.preset small { color: var(--muted); font-size: .625rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .375rem; }
.sw { width: 1.625rem; height: 1.625rem; border-radius: 50%; border: .125rem solid var(--panel); box-shadow: 0 0 0 .0625rem var(--line); cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 .125rem var(--accent); }

/* object list */
.list { display: flex; flex-direction: column; gap: .125rem; max-height: 18rem; overflow: auto; }
.rhead { display: flex; align-items: center; gap: .375rem; margin-top: .375rem; padding: .25rem .5rem; border-radius: .4rem; background: var(--panel2); font-weight: 600; cursor: pointer; }
.rhead:first-child { margin-top: 0; }
.rhead .rcount { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .75rem; }
.rhead[aria-current="true"] { background: var(--accentw); box-shadow: inset 0 0 0 .0625rem var(--accent); }
.row { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .3rem .5rem .3rem 1.25rem; border: .0625rem solid transparent; border-radius: .4rem; background: transparent; cursor: pointer; user-select: none; }
.row:hover { background: var(--panel2); }
.row[aria-current="true"] { background: var(--accentw); border-color: var(--accent); }
.row .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row .t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t small { color: var(--muted); font-size: .6875rem; }
.row[data-hidden] { opacity: .55; }
.row .bad { color: var(--danger); font-size: 1rem; width: 1rem; height: 1rem; }
.rbtn { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: .3rem; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.rbtn:hover { background: var(--panel); color: var(--text); }
.dot { width: .875rem; height: .875rem; border-radius: .25rem; flex: none; box-shadow: inset 0 0 0 .0625rem rgb(0 0 0 / 25%); }
.warn { display: flex; flex-direction: column; gap: .25rem; background: var(--warnw); color: var(--warnc); border-radius: .4rem; padding: .5rem .625rem; font-size: .8125rem; }
.warn div { display: flex; gap: .375rem; align-items: flex-start; }
.warn .ms { font-size: 1.125rem; width: 1.125rem; height: 1.125rem; }
.kbd { display: grid; grid-template-columns: auto 1fr; gap: .3rem .625rem; font-size: .75rem; color: var(--muted); }
.kbd kbd { font: 600 .6875rem/1.4 ui-monospace, Consolas, monospace; background: var(--panel2); border: .0625rem solid var(--line); border-bottom-width: .125rem; border-radius: .3rem; padding: 0 .35rem; color: var(--text); justify-self: start; white-space: nowrap; }
.area-list { display: flex; flex-direction: column; gap: .25rem; }
.area-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem; border-radius: .4rem; cursor: pointer; }
.area-row:hover { background: var(--panel2); }
.area-row span:nth-child(2) { flex: 1; }
.area-row b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* menus */
.menuwrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + .375rem); min-width: 13rem; background: var(--panel); border: .0625rem solid var(--line); border-radius: .5rem; box-shadow: var(--shadow); padding: .25rem; z-index: 20; display: flex; flex-direction: column; }
.menu.left { right: auto; left: 0; }
.menu button { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border: 0; background: transparent; border-radius: .375rem; cursor: pointer; text-align: left; white-space: nowrap; }
.menu button:hover { background: var(--panel2); }
.menu button .key { margin-left: auto; padding-left: 1.25rem; color: var(--muted); font-size: .75rem; }
.menu button .check { margin-left: auto; visibility: hidden; }
.menu button[aria-pressed="true"] .check { visibility: visible; color: var(--accent); }
.menu .note { margin: 0; padding: .375rem .625rem .5rem; max-width: 15rem; font-size: .75rem; line-height: 1.35; color: var(--muted); white-space: normal; }
.menu hr { border: 0; border-top: .0625rem solid var(--line); margin: .25rem 0; width: 100%; }
.savestate { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .25rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.savestate .ms { font-size: 1.125rem; width: 1.125rem; height: 1.125rem; }
.savestate[data-state="pending"] { color: var(--accent); }
.pname { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.view-switch button { min-width: 3.75rem; }
.k-toolbar { gap: .625rem; }
.k-dialog .k-btn { border-radius: .4rem; }

@media (max-width: 80rem) { .savestate .txt, .lbl-txt { display: none; } }
@media (max-width: 62rem) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 70vh auto auto; grid-template-areas: "bar" "stage" "left" "right"; }
  .toolbar { padding-inline: 5vw; }
  .side { padding-inline: 5vw; overflow: visible; }
  .side.left, .side.right { border: 0; }
  .grp { padding-left: 0; border-left: 0; }
  .list { max-height: none; }
  .hello { max-width: calc(100% - 2rem); top: auto; bottom: 3.25rem; }
}
@media (max-width: 30rem) { .pname { max-width: 7rem; } .brand strong { display: none; } }