/* Forms — rows, fields, inputs, buttons. */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.field input, .field select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; min-width: 140px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--border-strong); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: 0;
  padding: 9px 16px; border-radius: var(--r-pill); font: inherit; font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background .12s, transform .06s; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn.ghost { background: transparent; color: var(--accent-text); border: 0; padding: 7px 10px; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }