.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"],
.form-field input[type="number"], .form-field input[type="search"], .form-field input[type="url"],
.form-field select, .form-field textarea {
  display: block; width: 100%; min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-muted); border-radius: var(--radius-sm);
}
.form-field textarea { min-height: 6rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-focus); }
.form-field-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); }
.form-field-check label { margin: 0; }
.form-field-check input { width: 24px; height: 24px; accent-color: var(--color-primary); flex: none; }
.form-hint { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-1); }
.form-errors { color: var(--color-error-text); background: var(--color-error-bg); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); margin: 0 0 var(--space-4); }
input.otp-input { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; }

.filter { display: grid; gap: 0 var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-3); }
@media (min-width: 600px) {
  .filter { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .filter .btn { margin-bottom: var(--space-4); }
}

/* Eingabefeld mit festem Präfix (z. B. "/" vor dem Chat-Befehl) und Gruppen aus Checkboxen. */
.input-prefix { display: flex; align-items: stretch; }
.input-prefix-sign {
  display: inline-flex; align-items: center; padding: 0 var(--space-3); font-weight: 700;
  background: var(--color-surface-2); border: 1px solid var(--color-muted); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-prefix input[type="text"] { flex: 1; min-width: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
fieldset.form-field { border: 0; padding: 0; min-width: 0; }
fieldset.form-field legend { padding: 0; margin-bottom: var(--space-1); font-weight: 600; }