.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.section-dark .field-label,
.section-gradient-aurora .field-label,
.section-gradient-deep .field-label {
  color: var(--ink-300);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--pure);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}

.section-dark .field-input,
.section-gradient-aurora .field-input,
.section-gradient-deep .field-input,
.section-dark .field-select,
.section-gradient-aurora .field-select,
.section-gradient-deep .field-select,
.section-dark .field-textarea,
.section-gradient-aurora .field-textarea,
.section-gradient-deep .field-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--paper);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--ink-300);
  opacity: 0.7;
}

.theme-light .field-input::placeholder,
.theme-light .field-textarea::placeholder {
  color: var(--ink-500);
  opacity: 1;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.field-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--lh-relaxed);
}

.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) + 24px);
}

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
}

.field-checkbox input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--pure);
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
  position: relative;
  top: 2px;
}

.section-dark .field-checkbox input[type="checkbox"],
.section-gradient-aurora .field-checkbox input[type="checkbox"],
.section-gradient-deep .field-checkbox input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.24);
}

.field-checkbox input[type="checkbox"]:checked {
  background: var(--grad-signature);
  border-color: transparent;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"),
    var(--grad-signature);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px, 100% 100%;
}

.field-error {
  font-size: var(--fs-caption);
  color: #ef4444;
}

.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color: #ef4444;
}