.btn {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.btn-primary {
  border: 1px solid var(--accent-deep);
  background: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-danger {
  border: 1px solid var(--danger-deep);
  background: var(--danger);
  color: #FFFFFF;
}
.btn-danger:hover { background: var(--danger-deep); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-ghost:disabled:hover { border-color: var(--line); color: var(--muted); }
.btn-ghost .chevron { display: inline-block; transition: transform .15s; }
.btn-ghost.open .chevron { transform: rotate(180deg); }
.btn-ghost .badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 10.5px;
}