.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-secondary); }
.field .hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.field .error { font-size: var(--fs-xs); color: var(--color-critical); }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: var(--fs-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-teal-500); box-shadow: 0 0 0 3px var(--color-teal-100); }
.input.is-invalid { border-color: var(--color-critical); }
.textarea { resize: vertical; min-height: 90px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.search-box { position: relative; }
.search-box .input { padding-inline-start: 38px; }
.search-box .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); display: flex; }
.search-box .icon svg { width: 16px; height: 16px; }

.select-sm { width: auto; padding: 6px 10px; font-size: var(--fs-sm); }