:root {
  --bg: #f4f3ef;
  --panel: #ffffff;
  --line: #d9d6cf;
  --text: #1f1f1f;
  --muted: #6b6b66;
  --accent: #b1402c;
  --accent-soft: #f3dcd6;
  --ok: #2f7d4f;
  --warn-bg: #fff3cd;
  --warn-line: #e0b24a;
  --err-bg: #fde2df;
  --err-line: #d2584a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; color: var(--muted); }
h3 { font-size: 13px; margin: 14px 0 6px; }
button {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; cursor: pointer; color: var(--text);
}
button:hover { border-color: #aaa; }
button:disabled { opacity: .4; cursor: default; }
button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
button.danger { color: var(--accent); }
button.small { padding: 2px 7px; font-size: 12px; }
input, select { font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; width: 100%; background: #fff; }
label { display: block; font-size: 12px; color: var(--muted); }
label input, label select { margin-top: 3px; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

.topbar {
  display: flex; align-items: center; gap: 18px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { font-weight: 700; }
.floors { display: flex; gap: 4px; }
.floors button { border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.floors .cnt { display: inline-block; min-width: 1.5em; text-align: center; font-size: 11px; padding: 0 4px; border-radius: 999px; background: rgba(0,0,0,.08); }
.floors .cnt:empty { visibility: hidden; }
.floors button.active .cnt { background: rgba(255,255,255,.25); }
.tools { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.tools .wallT { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.tools .wallT select { width: auto; padding: 4px 6px; }
.tools .group { display: inline-flex; }
.tools .group button { border-radius: 0; margin-left: -1px; min-width: 32px; }
.tools .group button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.tools .group button:last-child { border-radius: 0 6px 6px 0; }
.intro { background: #fbf6ea; border-color: #e7d9b4; }
.intro ol { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; }
.intro li { margin-bottom: 4px; }
.row.between { justify-content: space-between; margin-top: 0; }
.row.between h2 { margin: 0; }

.main { flex: 1; display: flex; min-height: 0; }
.canvasWrap { flex: 1; position: relative; min-width: 0; background: #ecebe6; }
#plan { width: 100%; height: 100%; display: block; touch-action: none; }
.hint {
  position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--muted);
  background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 6px; pointer-events: none;
}
.side {
  width: 400px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px;
  background: var(--bg); border-left: 1px solid var(--line);
}
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.box:empty { display: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.row.wrap { flex-wrap: wrap; }
.factor, .slider { margin-top: 10px; }
.slider input { width: 100%; }
.sliderVal { display: block; font-size: 12px; color: var(--text); text-align: right; }
.factor input { width: 100%; }
.factorLabels { display: flex; justify-content: space-between; font-size: 11px; }

.warn { padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.warn.err { background: var(--err-bg); border: 1px solid var(--err-line); }
.warn.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.warn.ok { background: #e3f1e8; border: 1px solid #9ccbae; }

.roomEditor label { margin-bottom: 6px; }

table.rooms { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rooms th, table.rooms td { padding: 3px 4px; text-align: right; border-bottom: 1px solid #eee; white-space: nowrap; }
table.rooms th:first-child, table.rooms td:first-child, table.rooms td.res, table.rooms th:nth-child(2) { text-align: left; }
table.rooms td.res { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
table.rooms th { color: var(--muted); font-weight: 600; }
table.rooms th.sortable { cursor: pointer; user-select: none; }
table.rooms th.sortable:hover, table.rooms th.on { color: var(--text); }
table.rooms tr.sel td { background: var(--accent-soft); }
table.rooms tr.clickable { cursor: pointer; }
table.rooms tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.totals { margin-top: 10px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.totals b { font-weight: 600; }

.layoutList { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.layoutList li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #eee; }
.layoutList li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.layoutList li small { color: var(--muted); }

.legend div.item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.legend i { width: 18px; height: 12px; border: 1px solid #bbb; display: inline-block; }

@media (max-width: 900px) {
  .main { flex-direction: column; }
  .canvasWrap { height: 55vh; flex: none; }
  .side { width: auto; border-left: 0; border-top: 1px solid var(--line); }
}