.ml-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ml-input-label {
  font-size: var(--ml-font-size-sm);
  color: var(--ml-color-text-secondary);
  letter-spacing: var(--ml-font-letter-spacing-wide);
}

.ml-input {
  padding: 12px 16px;
  background: var(--ml-color-surface-cream);
  border: 1px solid var(--ml-color-surface-line);
  border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-family-sans);
  font-size: var(--ml-font-size-base);
  color: var(--ml-color-text-primary);
  transition: border-color var(--ml-motion-duration-fast), box-shadow var(--ml-motion-duration-fast);
  width: 100%;
}

.ml-input:focus {
  outline: none;
  border-color: var(--ml-color-brand-orange);
  box-shadow: var(--ml-shadow-glow-orange);
}

.ml-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ml-input--error {
  border-color: var(--ml-color-semantic-error);
}

.ml-input-help {
  font-size: var(--ml-font-size-xs);
  color: var(--ml-color-text-tertiary);
}

.ml-input-help--error {
  color: var(--ml-color-semantic-error);
}