/* ========== form.css：表单 ========== */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.form-label .required {
  color: var(--color-danger);
  margin-left: 4px;
}

.form-control {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.form-control::placeholder {
  color: var(--color-text-tertiary);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15);
  background-color: var(--color-surface);
}

.form-control.is-error {
  border-color: var(--color-danger);
}
.form-control.is-error:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

textarea.form-control {
  min-height: 88px;
  padding: var(--spacing-md) var(--spacing-lg);
  line-height: var(--line-height-base);
  resize: vertical;
}

.form-error {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  min-height: 1em;
}

.form-hint {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* 输入框带图标 */
.input-affix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-affix__icon {
  position: absolute;
  left: var(--spacing-lg);
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.input-affix__icon svg { width: 100%; height: 100%; }
.input-affix .form-control {
  padding-left: calc(var(--spacing-lg) + 32px);
}
.input-affix__action {
  position: absolute;
  right: var(--spacing-sm);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.input-affix__action:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}