.block-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 6px;
}
.block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
}
.drag-handle { color: #bbb; font-size: 16px; cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.block-type-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; background: #0066cc;
  border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}
.block-type-badge.static  { background: #888; }
.block-type-badge.dynamic { background: #2a9d8f; }
.block-preview-text {
  flex: 1; font-size: 12px; color: #666;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.block-expand { color: #bbb; font-size: 11px; margin-left: auto; }
.block-delete {
  background: none; border: none; color: #c00;
  cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1;
}
.block-delete:hover { color: #f00; }

.block-settings {
  border-top: 1px solid #eee;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.block-settings label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: #555; margin: 0;
}
.block-settings label.inline {
  flex-direction: row; align-items: center; gap: 6px;
}
.block-settings select,
.block-settings input[type="text"],
.block-settings input[type="number"] {
  padding: 4px 7px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 12px; width: 100%;
}
.block-settings input[type="color"] {
  height: 28px; padding: 1px 3px; border: 1px solid #ccc;
  border-radius: 4px; width: 60px; cursor: pointer;
}

.add-block-btns {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.add-block-btns button {
  font-size: 12px; padding: 5px 10px; background: #f0f0f0;
  color: #333; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;
}
.add-block-btns button:hover { background: #e0e0e0; }

#block-list { min-height: 20px; }