.form-group{display:flex;flex-direction:column;gap:.25rem;margin-bottom:var(--space-2)}label{font-weight:500}input,select,textarea{border:1px solid #d1d5db;border-radius:8px;padding:.5rem .75rem;font:inherit;color:var(--color-on-surface);background:var(--color-surface);transition:border-color .2s}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;box-shadow:var(--focus-ring);border-color:var(--color-primary)}input[aria-invalid=true]{border-color:var(--color-danger)}.form-error{color:var(--color-danger);font-size:.875rem}

/* --- Form component (extended) --- */
.form { display:grid; gap: var(--space-2); max-width: 720px; }
.form__group { display:flex; flex-direction:column; gap:.35rem; }
.form__label { font-weight: 600; }
.form__control { border:1px solid #e5e7eb; border-radius: var(--radius, 8px); padding:.65rem .85rem; background: var(--color-surface, #fff); }
.form__control:focus-visible { box-shadow: var(--focus-ring, 0 0 0 3px rgba(31,111,235,.4)); border-color: var(--color-primary, #1f6feb); }
.form__hint { font-size:.9rem; opacity:.9; }
.form__error { color: var(--color-danger, #e11d48); font-size:.9rem; }
.form__row { display:grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.form__actions { display:flex; gap:.5rem; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #e5e7eb; padding:.25rem .5rem; border-radius: 999px; font-size:.85rem; background: var(--color-subtle-surface, #f9fafb); }