:root { --gap: 12px; --primary: #0b5ed7; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: var(--gap); }
.d-flex { display: flex; gap: var(--gap); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.card { padding: var(--gap); border: 1px solid #ddd; border-radius: 6px; }
button { background: var(--primary); color: #fff; border: none; padding: 10px 16px; border-radius: 4px; cursor: pointer; }
.builder { display: grid; grid-template-columns: 3fr 1fr; min-height: 100vh; }
.canvas { padding: var(--gap); }
.sidebar { border-left: 1px solid #eee; padding: var(--gap); }
/* Tela de projetos */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.muted { color: #666; font-size: 14px; margin: 4px 0 0; }
.create-form { display: flex; align-items: flex-end; gap: var(--gap); margin-bottom: var(--gap); }
.create-form label { flex: 1; display: block; }
.create-form input { width: 100%; padding: 9px; border: 1px solid #ccc; border-radius: 4px; margin-top: 4px; }
.project-list { display: grid; gap: var(--gap); }
.project-card { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.project-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-link { background: var(--primary); color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 4px; font-size: 14px; }
.btn-secondary { background: #6c757d; }
button:disabled { opacity: .6; cursor: default; }
.feedback-ok { background: #e7f5e7; color: #1b5e20; }
.feedback-error { background: #fee; color: #900; }

@media (max-width: 768px) {
  .builder { grid-template-columns: 1fr; }
  .canvas, .sidebar { width: 100%; }
  .create-form { flex-direction: column; align-items: stretch; }
  .project-card { flex-direction: column; align-items: flex-start; }
}