.cc-form,
form.cc-form,
.form-card {
  display: grid;
  gap: 18px;
  width: min(100%, var(--cc-form-width));
}

.cc-form-card,
.form-card {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: clamp(20px, 4vw, 34px);
  background: color-mix(in srgb, var(--cc-panel) 96%, transparent);
  box-shadow: var(--cc-shadow);
}

.cc-field,
.form-group,
.field {
  display: grid;
  gap: 8px;
}

.cc-label,
label {
  color: var(--cc-ink);
  font-weight: 800;
}

.cc-help,
.form-help,
.field-help {
  color: var(--cc-muted);
  font-size: 13px;
  line-height: 1.7;
}

.cc-input,
.cc-select,
.cc-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  width: 100%;
  min-height: var(--cc-control-h);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-panel);
  color: var(--cc-ink);
  padding: 11px 14px;
  font: inherit;
  line-height: 1.45;
  transition: border-color var(--cc-transition), box-shadow var(--cc-transition), background var(--cc-transition);
}

textarea,
.cc-textarea {
  min-height: 130px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--cc-muted);
}

.cc-input[aria-invalid="true"],
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--cc-error);
}

.cc-error,
.field-error,
.form-error {
  color: var(--cc-error);
  font-size: 13px;
  font-weight: 800;
}

.cc-check,
.cc-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-ink-soft);
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--cc-green);
}

.cc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cc-toggle input {
  inline-size: 44px;
  block-size: 24px;
}

[data-theme="dark"] .cc-form-card,
[data-theme="dark"] .form-card {
  background: rgba(19, 25, 34, 0.86);
}

[data-theme="dark"] .cc-input,
[data-theme="dark"] .cc-select,
[data-theme="dark"] .cc-textarea,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: rgba(7, 10, 13, 0.52);
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--cc-ink);
}