/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover:not(:disabled) { opacity: 0.85; }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }

.btn-ghost { background: none; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }

.btn-sm { padding: 3px 8px; font-size: 11px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 1px 7px;
  border-radius: 10px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.3px;
}

.badge-active     { background: var(--green-sub);  color: var(--green); }
.badge-pending    { background: var(--yellow-sub); color: var(--yellow); }
.badge-building   { background: var(--yellow-sub); color: var(--yellow); }
.badge-failed     { background: var(--red-sub);    color: var(--red); }
.badge-superseded { background: var(--surface-2);  color: var(--text-muted); }
.badge-compose    { background: var(--purple-sub); color: var(--purple); }
.badge-image      { background: var(--accent-sub); color: var(--accent); }