/* ai-kw-generator 深色主题表单样式 */

[data-form-section] .dynamic-form-field label {
  font-family: var(--font-inter-tight);
  color: color-mix(in oklab, var(--color-white) 90%, transparent);
}

[data-form-section] .dynamic-form-field p,
[data-form-section] .dynamic-form-field .text-secondary\/60,
[data-form-section] .dynamic-form-field span.text-tagline-3 {
  font-family: var(--font-inter-tight);
  color: color-mix(in oklab, var(--color-white) 60%, transparent);
}

[data-form-section] .form-section__form input:not([type='checkbox']):not([type='file']),
[data-form-section] .form-section__form textarea,
[data-form-section] .form-section__form select {
  font-family: var(--font-inter-tight);
  background-color: var(--color-background-4);
  border-color: color-mix(in oklab, var(--color-stroke-3) 25%, transparent);
  color: color-mix(in oklab, var(--color-white) 90%, transparent);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

[data-form-section] .form-section__form input:not([type='checkbox']):not([type='file'])::placeholder,
[data-form-section] .form-section__form textarea::placeholder {
  color: color-mix(in oklab, var(--color-white) 40%, transparent);
}

[data-form-section] .form-section__form input:not([type='checkbox']):not([type='file']):focus,
[data-form-section] .form-section__form textarea:focus,
[data-form-section] .form-section__form select:focus {
  border-color: color-mix(in oklab, var(--color-stroke-3) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-white) 10%, transparent);
}

[data-form-section] .form-section__form select option {
  background-color: var(--color-background-4);
  color: color-mix(in oklab, var(--color-white) 90%, transparent);
}

[data-form-section] .form-section__form input[type='checkbox'] {
  border-color: color-mix(in oklab, var(--color-stroke-3) 40%, transparent);
  background-color: var(--color-background-4);
  accent-color: var(--color-opai-purple);
}

[data-form-section] .form-section__form input[type='file'] {
  font-family: var(--font-inter-tight);
  color: color-mix(in oklab, var(--color-white) 70%, transparent);
}

[data-form-section] .form-section__form input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--color-background-3);
  padding: 0.5rem 1rem;
  font-size: var(--text-tagline-4);
  color: color-mix(in oklab, var(--color-white) 80%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

[data-form-section] .form-section__form input[type='file']::file-selector-button:hover {
  background-color: color-mix(in oklab, var(--color-background-3) 80%, var(--color-white));
}

[data-form-section] .dynamic-form-field.has-error {
  border-radius: 0.75rem;
}

[data-form-section] [data-form-message]:not([hidden]) {
  animation: form-message-in 0.2s ease-out;
}

[data-form-section] [data-form-message][data-type='success'] {
  border-color: color-mix(in oklab, #22c55e 40%, transparent);
  background-color: color-mix(in oklab, #22c55e 12%, var(--color-background-4));
  color: #86efac;
}

[data-form-section] [data-form-message][data-type='error'] {
  border-color: color-mix(in oklab, #ef4444 40%, transparent);
  background-color: color-mix(in oklab, #ef4444 12%, var(--color-background-4));
  color: #fca5a5;
}

@keyframes form-message-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}