*{box-sizing:border-box}
:root{
  --bg:#0b0d12;
  --panel:#121622;
  --line:#202637;
  --line-2:#2b3350;
  --accent:#60a5fa;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --danger:#ef4444;
  --ok:#22c55e;
}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0d12 0%,#0e1320 100%);
  color:var(--text);
  font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
#app{
  display:grid;
  grid-template-columns: 300px 1fr;
  height:100vh;
}
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:16px;
  overflow:auto;
}
.sidebar h1{
  margin:8px 0 16px;
  font-size:20px;
  letter-spacing:.3px;
}
.group{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; background:#0f1422}
.group h2{margin:0 0 8px; font-size:14px; color:#cbd5e1; text-transform:uppercase; letter-spacing:.6px}
label{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0}
input[type=number], input[type=text], input[type=color], select, input[type=range]{
  width:120px; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:#0b1020; color:var(--text);
}
input[type=range]{ width:145px; padding:0; }
label.btnlike{
  border:1px solid var(--line);
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
  background:#1e293b;
  color:#e2e8f0;
}
label.btnlike input{display:none}
button{
  border:none; background:var(--accent); color:#001025; padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
button:active{transform:translateY(1px)}
button.secondary{background:#1e293b; color:#e2e8f0}
.row{display:flex; gap:8px; margin:6px 0 2px}
.hint{color:var(--muted); font-size:12px; margin-top:6px}

.stageWrap{
  display:grid;
  place-items:center;
  padding:16px;
}
#stageContainer{
  position:relative;
  max-width:calc(100vw - 340px);
  max-height:calc(100vh - 32px);
  overflow:auto;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:12px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(96,165,250,.08), transparent 60%);
}
#stage{
  display:block;
  background:#0a0f1c;
  border:1px solid var(--line-2);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  border-radius:12px;
}

/* Rulers */
.ruler text{ fill:#9fb2d4; font-size:10px; }
.ruler line{ stroke:#4a5673; stroke-width:1; }

/* Items */
.item rect{ fill:#60a5fa33; stroke:#60a5fa; stroke-width:2; }
.item text{ fill:#e5e7eb; font-size:12px; dominant-baseline:middle; text-anchor:middle; pointer-events:none; }

/* Shapes */
.shape text{ fill:#e5e7eb; font-size:12px; dominant-baseline:middle; text-anchor:middle; pointer-events:none; }
.shape .handle{ fill:#eab308; stroke:#c2410c; stroke-width:1.5; cursor:grab }

/* Selection highlight */
.cellHighlight{ fill:#22c55e22; stroke:#22c55e; stroke-dasharray:4 2; }

/* Edge handles */
.edge-handle{
  position:absolute; background:transparent; z-index:4;
}
.edge-handle.top{ left:0; right:0; top:0; height:16px; cursor:ns-resize; }
.edge-handle.bottom{ left:0; right:0; bottom:0; height:16px; cursor:ns-resize; }
.edge-handle.left{ top:0; bottom:0; left:0; width:16px; cursor:ew-resize; }
.edge-handle.right{ top:0; bottom:0; right:0; width:16px; cursor:ew-resize; }

/* Rotate handle */
.rotate-handle{ fill:#eab308; stroke:#c2410c; stroke-width:1.5; cursor:grab }
.rotate-handle:active{ cursor:grabbing }

/* Doors & Windows */
.door path.leaf{ fill:#34d39922; stroke:#34d399; stroke-width:3; }
.door path.arc{ fill:none; stroke:#34d399; stroke-width:2; stroke-dasharray:4 3; }
.door rect.hinge{ fill:#10b981; stroke:#064e3b; stroke-width:1; }
.door.selected .leaf, .window.selected .seg, .item.selected rect, .shape.selected .outline { stroke:#f59e0b; }

.window line.seg{ stroke:#93c5fd; stroke-width:6; }
.window text{ fill:#bfdbfe; font-size:12px; }