.builder-shell { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 0; min-height: calc(100vh - var(--header-h)); }
.builder-sidebar { background: var(--bg-2); border-right: 1px solid var(--line); padding: var(--s-4); overflow-y: auto; }
.builder-editor { padding: var(--s-5); overflow-y: auto; border-right: 1px solid var(--line); }
.builder-preview { background: var(--bg-3); padding: var(--s-5); overflow-y: auto; }
.builder-preview-inner { background: #fff; box-shadow: var(--shadow-md); border-radius: var(--r-md); overflow: hidden; max-width: 800px; margin: 0 auto; }

.section-tab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); font-size: 0.875rem; text-align: left; color: var(--ink-2); font-weight: 500; }
.section-tab:hover { background: var(--bg-3); }
.section-tab.active { background: var(--yellow); color: var(--ink); font-weight: 600; }
.section-tab-row { display: flex; gap: 4px; align-items: center; }
.section-tab-row .section-tab { flex: 1; }
.section-visibility { width: 24px; height: 24px; border-radius: 50%; background: transparent; color: var(--muted); font-size: 0.75rem; }
.section-visibility:hover { background: var(--bg-3); }

.field { margin-bottom: var(--s-3); }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 4px; color: var(--ink-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="month"], .field textarea, .field select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); font-size: 0.875rem;
}
.field textarea { resize: vertical; font-family: inherit; }
.field-error { color: var(--danger); font-size: 0.75rem; margin-top: 3px; }
.field-hint { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

.entry-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); margin-bottom: var(--s-3); background: var(--bg); }
.entry-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
.entry-remove { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-3); color: var(--muted); font-size: 1rem; line-height: 1; }
.entry-remove:hover { background: var(--danger); color: #fff; }
.entry-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.entry-row input { flex: 1; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 0.875rem; }
.editor-actions { margin-bottom: var(--s-3); }

.builder-topbar { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--s-3) var(--s-5); background: var(--bg-2); border-bottom: 1px solid var(--line); align-items: center; }
.builder-topbar .btn { white-space: nowrap; }
.builder-toolbar-spacer { flex: 1; }

.layout-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); margin-top: var(--s-4); }
.layout-controls select, .layout-controls input { padding: 6px 10px; font-size: 0.8125rem; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); }

@media (max-width: 1100px) {
  .builder-shell { grid-template-columns: 240px 1fr; }
  .builder-preview { display: none; }
}
@media (max-width: 800px) {
  .builder-shell { grid-template-columns: 1fr; }
  .builder-sidebar { display: flex; overflow-x: auto; gap: 4px; padding: var(--s-3); border-right: none; border-bottom: 1px solid var(--line); }
  .builder-sidebar .section-tab-row { display: inline-flex; flex-shrink: 0; }
  .builder-sidebar .section-tab { white-space: nowrap; }
}