:root {
  --blue: #1e40af; --green: #16a34a; --red: #dc2626; --yellow: #f59e0b;
  --bg: #f8fafc; --text: #0f172a; --muted: #64748b; --line: #cbd5e1;
}
* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: var(--bg); color: var(--text); }
header { padding: 16px 24px; background: white; border-bottom: 1px solid #e2e8f0; }
h1 { margin: 0 0 4px 0; font-size: 22px; }
.subtitle { margin: 0; color: var(--muted); }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
.panel { background: white; padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.toolbar { align-items: flex-end; }
.tool { display: flex; gap: 8px; align-items: center; }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
#canvasWrapper { width: 100%; border: 1px dashed #94a3b8; background: #fff; padding: 8px; }
#planCanvas { width: 100%; height: auto; border: 1px solid #cbd5e1; touch-action: none; }
.code { background: #0b1020; color: #c0d0ff; padding: 8px; border-radius: 6px; max-height: 300px; overflow: auto; }
.export button { background: var(--blue); color: white; padding: 10px 14px; border: 0; border-radius: 6px; cursor: pointer; }
.export button + button { background: var(--green); }
.export button + button + button { background: var(--yellow); color: #111; }
.export button + button + button + button { background: var(--red); }

.toolbtn { padding: 6px 10px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; }
.toolbtn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.toolbtn.danger { background: #fff1f2; border-color: #fecdd3; color: #b91c1c; }

svg .grid-line { stroke: #e5e7eb; stroke-width: 1; }
svg .grid-axis { stroke: #d1d5db; stroke-width: 1.5; }
svg .wall { stroke: #111827; stroke-linecap: butt; }
svg .room { fill: #f1f5f9; stroke: #111827; }
svg .door { stroke: #1f2937; fill: none; }
svg .window { stroke: #3b82f6; fill: none; stroke-width: 3; }
svg .measure { stroke: #15803d; fill: none; stroke-dasharray: 6 4; }
svg .handle { fill: #0ea5e9; stroke: #075985; }
svg .selected { filter: drop-shadow(0 0 3px rgba(30,64,175,0.6)); }