/*
 * Grupizo - Shared forms
 * Reusable fields and form primitives; page-specific layouts stay in pages/.
 *
 * Keep selectors here only when they belong to this responsibility.
 * See ../README.md (or ../../README.md inside components/pages).
 */

.field { display: grid; gap: 8px; color: var(--soft); font-size: 13px; font-weight: 600; }
.field input, .field select { width: 100%; height: 46px; padding: 0 14px; color: var(--text); border: 1px solid rgba(148,163,184,.22); outline: none; border-radius: 10px; background: rgba(2, 6, 23, .48); transition: border .18s, box-shadow .18s, background .18s; }
.field input::placeholder { color: #64748b; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--surface-solid); color: var(--text); }
.field input:focus, .field select:focus { border-color: var(--blue); background-color: rgba(2, 6, 23, .7); box-shadow: 0 0 0 3px rgba(58,123,255,.13); }
.field small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; }