/* Buttons, cards, forms, tables, badges. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .92rem; font-weight: 500;
  padding: .5rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn:hover { border-color: #cfd6d3; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: #275c4e; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .25rem; }
input, select, textarea {
  width: 100%; font: inherit; padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #cfe3db; border-color: var(--accent); }
.field { margin-bottom: .9rem; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

.badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 999px; background: #eef1f0; color: var(--ink-soft);
}
.error { color: var(--band-misaligned); font-size: .9rem; min-height: 1.2em; }
.toast { font-size: .85rem; color: var(--accent); min-height: 1.2em; }