html, body, .body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f5f5f5; border-bottom:1px solid #e0e0e0; }
.topbar .brand { font-weight:600; }
.topbar nav a { margin-left:12px; text-decoration:none; color:#333; }
.page-grid { display:grid; grid-template-columns: 260px 1fr 320px; gap:12px; padding:12px; }
.panel { border:1px solid #e0e0e0; border-radius:6px; background:#fff; overflow:auto; }
.panel .header { padding:8px 10px; font-weight:600; border-bottom:1px solid #eee; }
.panel .content { padding:8px 10px; }
#diagram { height: calc(100vh - 120px); }
.palette ul { list-style:none; padding:0; margin:0; }
.palette li { padding:6px 8px; border:1px dashed #ccc; border-radius:4px; margin-bottom:6px; cursor:grab; user-select:none; }
.palette li:active { cursor:grabbing; }
.property-grid label { display:block; font-size:12px; color:#666; margin-top:8px; }
.property-grid input, .property-grid select { width:100%; padding:6px 8px; box-sizing:border-box; }
.toolbar { display:flex; gap:8px; padding:8px; border-bottom:1px solid #eee; }
.toolbar button { padding:6px 10px; }