:root {
  --bg:#f6f8fb;
  --panel:#fff;
  --panel-2:#fbfdff;
  --text:#0f172a;
  --muted:#5b6778;
  --border:#e3e8ef;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display:flex;
  min-height:100vh;
  overflow:hidden;
}

.app {
  display:grid;
  grid-template-columns:320px 1fr 420px;
  gap:16px;
  width:100%;
  padding:16px;
}

.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;
  flex-direction:column;
}

.panel h2 {
  margin:0;
  padding:14px 16px;
  font-size:14px;
  border-bottom:1px solid var(--border);
}

.content { padding:14px; overflow:auto; }
.palette { display:grid; gap:10px; }
.chip {
  background:#f2f6fc;
  border:1px dashed #c9d4e6;
  border-radius:12px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  cursor:grab;
}
.chip button {
  border:1px solid #c9d4e6;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.stage-wrap { display:flex; justify-content:center; align-items:flex-start; padding:8px; }
.stage { width:100%; max-width:1280px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.preview { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px; }
.dropzone {
  min-height:360px;
  border:1px dashed #c9d4e6;
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.block {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:grab;
}
.block.dragging { opacity:.6; }
.handle { font-size:16px; color:#64748b; cursor:grab; }
.label { flex:1; font-size:13px; }
.actions { display:flex; gap:8px; }
.btn { border:1px solid #c9d4e6; border-radius:10px; background:#fff; cursor:pointer; padding:8px 10px; }
iframe#render { width:100%; height:760px; border:none; border-radius:10px; }