/* Editor form grid & fields */
#editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--gap-md);
  max-width: 48rem;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--shadow-light);
  padding: var(--gap-md);
  overflow-y: auto;
}

/* Label + field stacking */
#editor label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Inputs, selects */
#editor input,
#editor select {
  margin-top: var(--gap-sm);
  padding: 0.5rem var(--gap-sm);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.1);
  color: var(--fg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* “Add Custom” & Submit buttons */
#add-attr,
#editor button[type="submit"] {
  grid-column: span 2;
  padding: var(--gap-sm) var(--gap-md);
  background: var(--accent);
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

#add-attr:hover,
#editor button[type="submit"]:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}